0

我有以下代码，我试图从一个元素中supercontainer动态删除所有“容器”元素。因为 nodeList 是活动的，所以下面的代码应该删除container1以及container2但它不是。有人能告诉为什么吗？怎么办我改进了这段代码以便动态删除所有子节点？

<html><body></body>
<script type="text/javascript">
var supercontainer=document.createElement("div");
var container2=document.createElement("div");
var container1=document.createElement("div");
var b=document.createElement("div");
var c=document.createElement("div");
var d=document.createElement("div");
b.appendChild(document.createTextNode("book1"));
c.appendChild(document.createTextNode("book2"));
d.appendChild(document.createTextNode("book3"));
container1.appendChild(b);
container1.appendChild(c);
container1.appendChild(d);
container2.appendChild(document.createTextNode("i am container2"));
supercontainer.appendChild(container1);
supercontainer.appendChild(container2);
document.body.appendChild(supercontainer);
function removeContainers(){
var j=0;
for(i=0;i<supercontainer.childNodes.length;i++){
        supercontainer.removeChild(supercontainer.childNodes[j]);
    }
}
removeContainers();
</script>
</html>
4

2 回答 2

2

在你的循环中，

  1. 我 = 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]);
    }
}

演示：小提琴

于 2013-05-10T09:21:14.067 回答
0

因为您的循环缺少元素。

在第一次迭代中，您删除NodeList. 正如您所说，NodeList's 是实时的，因此该元素也会从NodeList您正在迭代的元素中删除。这会将'st 元素转移到th 元素。[1][0]

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

反而;

while (supercontainer.childNodes.length) {
    supercontainer.removeChild(supercontainer.childNodes[0]);
}
于 2013-05-10T09:21:34.743 回答