JavaScript - 奇怪的错误不会删除元素

Question

我的简单待办事项应用程序遇到了一个奇怪的问题。其主要功能是向“ul”添加新元素以及单击“li”更改其类。单击元素后，它还会添加一个带有很棒字体图标的“i”，再次单击它后，它应该将其删除。当我从上到下单击添加的元素时，它工作正常，但是当我从下到上单击时，“i”仅从顶部的第一个元素中删除。我不明白为什么会这样，所以我将不胜感激任何帮助。

这是现场演示，您可以在其中重现此错误: https://michalgrochowski.github.io/to-do/

这是负责该操作的代码:

document.getElementById("list").addEventListener("click", function(e) {
  if (e.target && e.target.matches("li.item")) { 
    e.target.className = "itemDone"; 
    var check = document.createElement("i");
    check.className = "fa fa-check done"; 
    e.target.appendChild(check); 
  } else if (e.target && e.target.matches("li.itemDone")) {
    e.target.className = "item"; 
    var done = document.getElementsByClassName("done");
    var i;
    for (i = 0; i < done.length; i++) {
       e.target.removeChild(done[i]);
    };
  };
});

我已经在firefox和chrome中测试过了，所以它与浏览器无关，它一定是代码中的东西。我想也许问题出在函数内部的循环上，但我不知道如何改变它。

Answer 1

var did = document.getElementsByClassName("done"); 获取文档中所有 .done 元素的列表(包括那些不是子元素的元素) e.target)。因此，在执行 e.target.removeChild(done[i]) 时，如果当前 done[i] 是 e.target 的子级，它会被删除，否则会抛出一个错误，指出元素 done[i] 不是 e.target 的子元素。试试这个:

var done = e.target.getElementsByClassName("done");

注意: e.target 中是否可能存在具有类 .done 的子元素(子元素的子元素...) >。这也会引发错误。因为这样子子级就不会是 e.target 的直接子级。 removeChild 仅适用于直接子级。您可以使用以下方法来避免麻烦:

var done = e.target.children; // to get the direct children only
var i;
for (i = 0; i < done.length; i++) {
   if(done[i].matches('.done') // if it matches the criteria
       e.target.removeChild(done[i]); // remove it
}