Question

单击按钮时，我正尝试从列表中删除项目。

JSFiddle here - https://jsfiddle.net/y3u47f11/15/

HTML

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<a class="btn" onclick="emptyList()">clear list</a>

JS

window.emptyList = function () {
  var ul = document.querySelector('.list');
  var listLength = ul.children.length;

  for (i = 0; i < listLength; i++) {
    ul.childNodes[i].removeChild();
  }

  // this works
  // ul.innerHTML = "";

}

问题在于，当我点击按钮时，只有少数项目从列表中删除，例如在上面的示例中，我单击“清除列表”按钮一次，删除项目1,3和5。我第二次点击按钮，第2项被删除。最后在第三次点击时清空列表。

如果设置ul.innerHTML =“”;

，我实际上可以轻松地删除元素

但我似乎无法弄清楚为什么emptyList函数没有按预期工作，并且会对我出错的地方有所了解。

谢谢，

Answer 1

chlidren或childNodes是实时element collection(HTMLCollection)，因此索引可能会在每次删除后更新，因此请删除索引0处的元素。虽然在父节点上应用removeChild并添加元素作为参数。

window.emptyList = function () {
  var ul = document.querySelector('.list');
  var listLength = ul.children.length;

  for (i = 0; i < listLength; i++) {
    ul.removeChild(ul.children[0]);
  }
}

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<a class="btn" onclick="emptyList()">clear list</a>

仅供参考： childNodes包含文本节点，因此请使用chlidren属性。

Answer 2

我认为您需要以相反的顺序执行此操作，因为删除节点索引后不再指向正确的节点，因为整个列表已减少。另外，只需直接查询li元素

＆＃13;

window.emptyList = function () {
  var li = document.querySelectorAll('.list > li');
  var listLength = li.length;
  
  for (var i = listLength-1; i >=0 ; i--) {
    li[i].parentNode.removeChild(li[i]);   
  }
  
  // this works
  // ul.innerHTML = "";

}

＆＃13;

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<a class="btn" onclick="emptyList()">clear list</a>

＆＃13;

Answer 3

尝试以下代码。你错误地使用了removeChild。

window.emptyList = function () {
      var ul = document.querySelector('.list');
      var listLength = ul.children.length;

      for (i = 0; i < listLength; i++) {
        ul.removeChild(ul.childNodes[i]);
      }
    }

Answer 4

window.emptyList = function () {
  var ul = document.querySelector('.list');
  var listLength = ul.children.length;

  while (ul.children.length !=0){
    ul.removeChild(ul.childNodes[0]);
  }

  // this works
  // ul.innerHTML = "";

}

删除第一个后，列表长度会被更改。

在for for循环（JS）中从UL中删除LI

4 个答案: