使用元素的nodeList「childNodes」。爲什麼container2被刪除？

我有下面的代碼，我試圖動態地從元素supercontainer動態移除所有「容器」元素。由於nodeList是活的，下面的代碼應該刪除container1以及container2，但它不是。任何一個告訴我爲什麼？如何改進此代碼以動態刪除所有childNodes？使用元素的nodeList「childNodes」。爲什麼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>

來源

2013-05-10 Romantic Electron

在你的循環，

I = 0;然後nodes.length是2
第一項被移除然後i變爲1和長度變爲1
循環終止條件失敗

的解決辦法是保持循環計數在像length單獨的計數器變量

使用

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

演示：Fiddle

來源

2013-05-10 09:21:14

哦，謝謝你的人，你得到它的工作對我來說，我並沒有意識到，每一個時間長度也將得到改變 – 2013-05-10 09:24:47

@RomanticElectron高興，這是幫助的人，這是一個常見的錯誤 – 2013-05-10 09:25:24

因爲你的循環缺少元素。

在第一次迭代中，您將刪除NodeList中第一個元素。正如你所說，NodeList是活的，所以這個元素從你正在迭代的NodeList中刪除。這將爲[1]'st的元素移至[0] th。

循環然後遞增i到[1]，讓你忽略在列表現在0的元素。

取而代之;

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

來源

2013-05-10 09:21:34 Matt

使用元素的nodeList「childNodes」。爲什麼container2被刪除？

回答

相關問題