JavaScript-奇怪的bug不会删除元素

我的简单待办程序有一个奇怪的问题。它的主要功能是向ul添加新元素，并单击li更改其类别。单击元素后，它还会添加一个带有字体的i可怕图标，再次单击后，它应该会将其删除。当我从上到下单击“添加的元素”时效果很好，但当我从下到上单击时，我只从顶部的第一个元素中删除。我不明白为什么会这样，所以我非常感谢你的帮助

这是一个现场演示，您可以在其中重现此错误：

下面是负责该操作的代码：

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中测试过了，所以它与浏览器无关，它一定是代码中的某个东西。我想可能是函数内部的循环有问题，但我不知道如何更改它。

var done=document.getElementsByClassNamedone；获取文档中所有.done元素的列表，包括那些不是e.target子元素的元素。因此，在执行e.target.removeChilddone[i]时，如果当前的done[i]是e.target的子元素，那么它将被删除，否则它将抛出一个错误，说明元素done[i]不是e.target的子元素。试试这个：

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

注：如果可能存在子元素children的子元素。。。有类的e.target的。完成。这也会抛出一个错误。因为这样子级就不会是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
}

---

控制台说错误在e.target.removeChilddone[i]上；原因：未能在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。使用console.log检查它，以查看with元素正在尝试调用removeChild方法。e.target.getElementsByClassNamedone；无法在Chrome mobile上复制。在我看来很实用。我能够在所有订单中添加、交叉和删除，从上到下，反向和随机。仅供参考，您不需要e.target&检查。点击事件在事件对象上总是有一个.target。斜视你是一个天才，这一行是问题所在，并对其进行了更改。请将你的评论作为答案发布，以便我可以将其标记为已解决。是的，这完美地解决了问题，就像@Squint之前在评论中写道的那样：