Javascript ToDo 列表删除和完成按钮答案

【问题标题】：Javascript ToDo List Delete and Complete ButtonsJavascript ToDo 列表删除和完成按钮
【发布时间】：2019-02-07 01:46:47
【问题描述】：

我的CodePen

所以当我点击删除和完成按钮时，它会运行这些功能

function deleteListItem(){
   alert("Item was deleted");            
}


function completeListItem(){
   alert("This item was completed");
}

两个按钮。我想知道如何使用事件委托来分离这些功能，这样每当我点击完成按钮时它都不会运行这两个功能。

【问题讨论】：

标签： javascript events event-delegation

【解决方案1】：

在您的 javascript 中，当您声明 deleteButton 和 completeButton 时，它们都被分配了相同的元素 ul。该元素包含整个列表。这不是你想要的，你想要处理按钮的点击。 deleteButton 应该分配给您的删除按钮元素，您的 completeButton 应该分配给您的完整按钮元素。为此，只需使用所需按钮的 ID 而不是 UL 的 ID。

在你的代码中，改变这个：

var deleteButton = document.getElementById("todo");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("todo");
completeButton.addEventListener("click", completeListItem);

到这里：

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

编辑： 由于您的按钮不是唯一的，因此您不应使用 id 来添加事件侦听器。您应该使用一个类并通过循环将事件侦听器分配给该类的所有元素。在您的 html 中为您的按钮添加一个类属性，如下所示：<button class="Remove"><i class="fa fa-trash" aria-hidden="true"></i></button>。然后以这种方式处理事件：

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

【讨论】：

这适用于第一个元素，它只是我的示例元素。但是当我创建一个新列表时，它不会运行按钮的任何功能。
@Faizanpakiman698Khan 对不起，我没有提前考虑，只是让你当前的代码工作。您应该为按钮使用类而不是 id，因为 Id 应该是唯一的。而不是 .getElementById 使用 getElementsByClassName() 并在您的 html 中添加类。我会更新我的答案以更好地解释。
除了添加一个类之外，添加 id 也是有意义的（可能以递增数字为后缀）。否则您将无法选择要删除的元素（或标记为完成）
@Pratheep 可以改进很多，但我认为重写整个代码并不合适。如果代码的其他部分需要，最好简单地回答问题并打开一个新问题。
@NTR 所以...这很奇怪，但是当我更改我的 html 以向按钮添加一个类并更改 document.getElementsByClassName("Remove"); 和 document.getElementsByClassName("Remove"); 它甚至不允许我创建一个新列表元素。我完全理解了 for 循环背后的想法，但现在没有任何效果，哈哈

【解决方案2】：

var deleteButton = document.getElementById("Remove");
  deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
  completeButton.addEventListener("click", completeListItem);

将addEventListener 分配给按钮的特定id。 id todo 是 ul 所以点击 ul 里面的任何东西都会运行这两个函数

【讨论】：