使用element的nodeList“childNodes”。为什么不删除container2？

Question

我有以下代码，我正在尝试动态删除元素supercontainer中的所有“容器”元素。由于nodeList是实时的，以下代码应该删除container1以及{ {1}}但它不是。可以告诉为什么？如何改进此代码以便动态删除所有childNodes？

container2

Answer 1

在你的循环中，

1. i = 0;那么nodes.length是2
2. 删除第一项，然后i变为1，长度变为1
3. 循环终止条件失败

解决方案是将循环计数保持在单独的计数器变量中，如length

使用

function removeContainers(){
    var j=0, len = supercontainer.childNodes.length;
    for(i=0;i<len;i++){
        supercontainer.removeChild(supercontainer.childNodes[j]);
    }
}

演示：Fiddle

Answer 2

因为你的循环缺少元素。

在第一次迭代中，删除NodeList中第一个元素。如你所说，NodeList已经存在，所以这个元素也会从你正在迭代的NodeList中删除。这会将 [1]'st的元素转移到[0]。

循环然后将i递增到[1]，因此您忽略列表中现在为0 的元素。

相反;

while (supercontainer.childNodes.length) {
    supercontainer.removeChild(supercontainer.childNodes[0]);
}