javascript - 使用循环从父节点中删除元素

Question

今天我要解决这个问题，所以我有一个 html 元素数组(例如 3 个输入)我想从 dom 中删除每一个。所以我必须对它们进行迭代循环，但我也不应该增加该值，因为它将跳过所有其他元素，这意味着我必须只删除数组的第一个元素，直到它存在为止，因此对于此任务，我使用此代码

 while(inputs[0]) {
    inputs[0].parentNode.removeChild(inputs[0]);
 }

这完美地工作并删除了所有元素。但是 for...of 循环呢？它还获取数组的每个值，如果我每次从数组获取元素时删除第一个输入会怎么样？像这样:

for(input of inputs){
    inputs[0].parentNode.removeChild(inputs[0]);
}

我也尝试过这个，在 3 个输入中它留下了第三个(没有删除它)所以我想知道为什么？有人可以告诉我它是如何错过第三个的吗？ (最好有图解说明)

谢谢

Answer 1

在第一次迭代时，迭代器位于零位置，有三个元素。你删除一个。

 v
 0 1 2

在第二次迭代时，迭代器位于位置一，有两个元素。您删除一个。

   v
 0 1

在第三次迭代时，迭代停止，因为只有一个元素，并且索引为 3，因此它位于数组之外。没有进行删除操作。

      v
 0

这里的主要问题/优点是节点是一个实时集合。如果它不是实时的(例如，如果您使用 querySelectorAll)，则第二个版本将起作用:

 //     v declare variables!
 for(const input of document.querySelectorAll("input"))
   input.remove(); // < remove is way easier