javascript - 无法删除所有子节点

Question

我想从它们的父节点中删除所有带有 class="child" 的子节点，但只删除奇数序列。如何在原生 javascript 中删除所有带有 class="child" 的元素，为什么只删除奇数序列？

var child = document.getElementsByClassName("child");

function remove(){
  for (var i=0; i<child.length; i++) {
    child[i].parentNode.removeChild(child[i]);
  }
}
document.getElementById("del").onclick = remove;

<div>
  <div class="child">
    Child 1
  </div>
  <div class="child">
    Child 2
  </div>
  <div class="child">
    Child 3
  </div>
  <div class="child">
    Child 4
  </div>
</div>

<br/>

<div>
  <div class="child">
    Child 5
  </div>
  <div class="child">
    Child 6
  </div>
</div>

<button id="del">Remove Child</button>

Answer 1

getElementsByClassName() 返回一个 NodeList，它是一个类似数组的对象，可呈现结果的实时 View 。

当您从这些元素中删除类时，这些元素也会从 NodeList 中删除。

当您从 child[0] 中删除该类时，child 会收缩，并且 child[0] 成为下一个元素。

有很多方法可以解决这个问题:

• 将 NodeList 复制到一个数组，这样它就不会在您下面发生变化(例如，child = Array.prototype.slice.call(child))

  <

• 向后循环，这样您就不会受到索引变化的影响

• 始终从 child[0] 中删除该类，直到 NodeList 为空。