Question

当我运行以下代码时，一半的项目将从列表中删除..我正在尝试从列表中删除所有项目。

  //Sets an event listener to the reset button.
  resetButton.addEventListener('click', (e) => {
      const ul = document.getElementById("myUL");
      console.log(ul.children.length);

      //Moves through the unordered list and removes each list item.
      for(let i = 0; i < ul.children.length; i++) {
        ul.removeChild(ul.children[i]);
      }
  });

Answer 1

您正在遍历列表并在迭代内部操作列表删除元素。这导致了这个问题。

要删除节点中的所有元素，您只需执行以下操作：

document.getElementById("myUL").innerHTML = '';

否则，如果您因某种原因喜欢循环，请执行以下操作：

var el = document.getElementById("myUL");
while (el.firstChild) {
   el.removeChild(el.firstChild);
}

Answer 2

你可以这样做，代码会更紧凑

jquery解决方案

  //Sets an event listener to the reset button.
  resetButton.addEventListener('click', (e) => {
      const ul = document.getElementById("myUL");

      $(ul).empty();

  });

此函数删除父对象的所有子对象

 .empty();

html标准解决方案

  //Sets an event listener to the reset button.
  resetButton.addEventListener('click', (e) => {
      const ul = document.getElementById("myUL");

      ul.innerHTML ="";

  });

此变量表示父对象的html内容

.innerHTML =""

Answer 3

你的代码似乎是随机的原因是：

for(let i = 0; i < ul.children.length; i++) {
    ul.removeChild(ul.children[i]);
}

当您从UL中删除元素时，它的子项长度变小，因此ul.children.length从n减少到n-1，再到n-2等等。但是，i正在增加。最终，即使有孩子遗留，i也会大于ul.children.length。随着i的增加，你的孩子在UL中变得越来越小，但你首先要从0中删除。因此，这意味着您最终还将尝试删除不存在的元素，因为它们现在位于[0]中。

我将您的代码修改为以下内容：

document.getElementById('reset').addEventListener('click', (e) => {
  const ul = document.getElementById("myUL");

  while (ul.children[0]) {
    ul.removeChild(ul.children[0])
  }
});

removeChild之（）;不从列表中删除所有项目

3 个答案: