Question

我的简单待办事项有一个奇怪的问题。它的主要特点是为＆＃34; ul＆＃34;添加新的元素。并点击＆＃34; li＆＃34;改变它的阶级。单击元素后，它还会添加一个＆＃34; i＆＃34;使用font-awesome图标并再次单击它后应删除它。当我从上到下点击添加元素时它工作正常，但是当我从下到上点击时，＆＃34; i＆＃34;仅从顶部的第一个元素中删除。我无法弄清楚为什么会这样，所以我将不胜感激。

这是现场演示，您可以在其中重现此错误： 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 done = 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的{@ 1}}子元素（{1}}的子元素可能属于.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
}

JavaScript - 怪异的bug并没有删除元素

1 个答案: