0

次のコードがあり、要素からすべての「コンテナ」要素を動的に削除しようとしてsupercontainerいcontainer1ますcontainer2。すべての childNodes を動的に削除するように、このコードを改善しますか?

<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はライブであるため、この要素はNodeList繰り返し処理している からも削除されます。これにより、 'st'だっ た要素がth に移動します。[1][0]

その後、ループは にインクリメントiされるため、リストで現在 0[1]になっている要素は無視します。

その代わり;

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