时间戳

首页 > 解决方案 > JS删除具体

  • addEventListener() 的元素

    • javascript - JS删除具体
  • addEventListener() 的元素

    • 问题描述

    我是 JS 和 DOM 的新手。

    我想li通过使用 addEventListener() 单击其子删除按钮来删除特定项目。我找到了一些类似的相关解决方案，但我正在尝试提出一个更优雅的解决方案。

    <ul>
    <li>Notebook</li>
    <li>Jello</li>
    <li>Spinach</li>
    <li>Rice</li>
    <li>Birthday Cake</li>
    <li>Candles</li>
</ul>

    以下是我测试过但没有成功的 JavaScript 代码。

    function removeItem(e) {
    e.target.parentNode.remove();
}

deleteButton.addEventListener("click", removeItem);

    这是完整的代码： 

    var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var deleteButton = document.createElement("button");

Array.from(ul.children).forEach( function(item) {
	appendDeleteBtnTo(item);
})

function appendDeleteBtnTo(element) {
	var deleteButton = document.createElement("button");
	deleteButton.innerHTML = "Delete";
	deleteButton.classList.add("delete");
	element.appendChild(deleteButton);
}

function lineThrough(e) {
	if (e.target.tagName === "LI") {
		e.target.classList.toggle("done");
	}
}

// =========== not working ====================================
function removeItem(e) {
	e.target.parentNode.parentNode.remove();
}

deleteButton.addEventListener("click", removeItem);
// =============================================================

function inputLength() {
	return input.value.length;
}

function createListElement() {
	var li = document.createElement("li");
	li.appendChild(document.createTextNode(input.value));
	ul.appendChild(li);
	input.value = "";
	appendDeleteBtnTo(li);
}

function addListAfterClick() {
	if (inputLength() > 0) {
		createListElement();
	}
}

function addListAfterKeypress(event) {
	if (inputLength() > 0 && event.keyCode === 13) {
		createListElement();
	}
}


ul.addEventListener("click", lineThrough);
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
    .done {
  text-decoration: line-through;
}

ul li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
    <!DOCTYPE html>
<html>
<head>
	<title>Javascript + DOM</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Shopping List</h1>
	<p id="first">Get it done today</p>
	<input id="userinput" type="text" placeholder="enter items">
	<button id="enter">Enter</button>
	<ul>
		<li class="bold red" random="23">Notebook</li>
		<li>Jello</li>
		<li>Spinach</li>
		<li>Rice</li>
		<li>Birthday Cake</li>
		<li>Candles</li>
	</ul>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

    标签： javascripthtmldom

    解决方案

    通过在父级上设置事件处理程序并检查谁是处理程序中的实际目标来使用事件委托。这有两个优点：

    1. 您可以添加/删除列表项，而无需将事件处理程序附加到添加的项。
    2. 您可以delete在一个简单的处理程序中轻松地组合和行功能。

    事件处理程序被添加到列表 ( ul)。每当单击列表或其子项时，处理程序都会检查目标是否在列表项内/使用Element.closest()。如果在链中未找到列表项，则函数终止 ( return)。如果找到列表项 ( target)，我们检查实际的点击目标是否是删除按钮。如果是删除按钮，target则删除。如果没有，done则添加该类。

    function listItemClickHandler(e) {
  const li = e.target.closest('li');

  if(!li) return;

  if (e.target.matches('.delete')) {
    li.remove();
  } else {
    li.classList.toggle('done');
  }    
}


    var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var deleteButton = document.createElement("button");

Array.from(ul.children).forEach(function(item) {
  appendDeleteBtnTo(item);
})

function appendDeleteBtnTo(element) {
  var deleteButton = document.createElement("button");
  deleteButton.innerHTML = "Delete";
  deleteButton.classList.add("delete");
  element.appendChild(deleteButton);
}

function inputLength() {
  return input.value.length;
}

function createListElement() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";
  appendDeleteBtnTo(li);
}

function addListAfterClick() {
  if (inputLength() > 0) {
    createListElement();
  }
}

function addListAfterKeypress(event) {
  if (inputLength() > 0 && event.keyCode === 13) {
    createListElement();
  }
}

function listItemClickHandler(e) {
  const li = e.target.closest('li');
  
  if(!li) return;
  
  if (e.target.matches('.delete')) {
    li.remove();
  } else {
    li.classList.toggle('done');
  }    
}

ul.addEventListener("click", listItemClickHandler);
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
    .done {
  text-decoration: line-through;
}

ul li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
    <h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
  <li class="bold red" random="23">Notebook</li>
  <li>Jello</li>
  <li>Spinach</li>
  <li>Rice</li>
  <li>Birthday Cake</li>
  <li>Candles</li>
</ul>

    推荐阅读