[JS删除特定的 addEventListener（）的元素

Question

我是JS和DOM的新手。

我想通过使用addEventListener（）单击其子项“删除”按钮来删除特定的LI项目。我找到了一些相关的解决方案（one of them），但我正在尝试提出一种更优雅的解决方案。是否可以按以下方式进行操作：

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

这是我正在尝试实现的方法，但是它不起作用：

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

deleteButton.addEventListener("click", removeItem);

这里是demo

预先感谢。

Answer 1

我们要将事件侦听器附加到正在创建的每个删除按钮上。

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

    deleteButton.addEventListener("click", removeItem);
}

Answer 2

Here我们要将事件侦听器附加到正在创建的每个删除按钮上。参见修改过的小提琴。

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

    deleteButton.addEventListener("click", removeItem);
}

Answer 3

从您的演示中（被截断）：

var deleteButton = document.createElement("button"); //<-- never inserted into DOM
//...
function appendDeleteBtnTo(element) {
    var deleteButton = document.createElement("button");
    deleteButton.innerHTML = "Delete";
    deleteButton.classList.add("delete");
    element.appendChild(deleteButton);
}
deleteButton.addEventListener("click", removeItem);

问题是您将事件分配给的删除按钮与最终要附加到每个li的删除按钮不同-在appendDeleteBtnTo()内是完全分开的。实际上，您要绑定的对象实际上从未插入到DOM中。

您可以将事件绑定到同一函数中。更好，更经济的方法是将事件绑定到身体（或至少一些容器），从而“委派”事件，检查事件在触发时是否适用于您的特定情况。

我们通过检查事件对象的target属性中填充的内容来完成。

document.body.addEventListener('click', evt => {
    if (!evt.target.matches('li > button')) return; //quit - click was not to li > button
    removeItem(evt); //remove li
});

Answer 4

我正在尝试提出一种更优雅的解决方案

由于回调既不冗长也不复杂，因此您可以-无需调用命名函数-向包含ES2015 .addEventListener()的.remove()方法添加匿名回调。

.addEventListener('click', (e) => e.target.parentNode.remove(), false)
工作示例：

const shoppingList = document.getElementsByTagName('ul')[0];
const shoppingListItems = [... shoppingList.getElementsByTagName('li')];

for (shoppingListItem of shoppingListItems) {

  let deleteButton = document.createElement('button');
  deleteButton.type = 'button';
  deleteButton.classList.add('deleteButton');
  deleteButton.textContent = 'Delete this';
  deleteButton.addEventListener('click', (e) => e.target.parentNode.remove(), false);
  shoppingListItem.appendChild(deleteButton);
}
li {
  padding: 6px 0;
  font-size: 16px;
  line-height: 24px;
}

.deleteButton {
  display: inline-block;
  margin-left: 12px;
}
<ul>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>

Answer 5

Add Event Listener to each delete button where they have created.

function appendDeleteBtnTo(element) {
    var deleteButton = document.createElement("button");
    deleteButton.innerHTML = "Delete";
    deleteButton.classList.add("delete");
    deleteButton.addEventListener("click", removeItem); // add the event lisntener
    element.appendChild(deleteButton);
}

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

Answer 6

使用事件委托来组合delete和直通功能：