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

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

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

   v
 0 1

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

      v
 0

这里的主要问题/优点是nodes是一个实时集合。如果它不是实时的（例如，如果您使用querySelectorAll），则第二个版本可以工作：

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