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

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

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

      v
 0

这里的主要问题/优势是nodes 是一个实时集合。如果它不会上线（例如，如果您使用 querySelectorAll），那么第二个版本将起作用：

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