Javascript .removeChild（）只会删除偶数节点？

我想动态地添加ID =“prnt”的DIV下的儿童DIV。节点的添加工作正常没有问题。然而，对于被删除的节点来说，这足够奇怪了，它只能删除包含0的偶数节点。为什么这样呢，我可能是一些愚蠢的东西，但它看起来更像是一个错误。我可能是非常错误的。Javascript .removeChild（）只会删除偶数节点？

<script type="text/javascript"> 

     function displayNodes() 
     { 
      var prnt = document.getElementById("prnt"); 
      var chlds = prnt.childNodes; 
      var cont = document.getElementById("content"); 

      for(i = 0; i < chlds.length; i++) 
      { 
       if(chlds[i].nodeType == 1) 
       { 

        cont.innerHTML +="<br />"; 
        cont.innerHTML +="Node # " + (i+1); 
        cont.innerHTML +="<br />"; 
        cont.innerHTML +=chlds[i].nodeName; 
        cont.innerHTML +="<br />"; 

       } 
      } 
     } 

     function deleteENodes() 
     { 
      var prnt = document.getElementById("prnt"); 
      var chlds = prnt.childNodes; 


      for(i = 0; i < chlds.length; i++) 
      { 

        if(!(chlds[i].nodeType == 3)) 
        { 
         prnt.removeChild(chlds[i]); 
        } 

      } 


     } 

     function AddENodes() 
     { 
      var prnt = document.getElementById("prnt"); 

      //Only even nodes are deletable PROBLEM 

      for(i = 0; i < 10; i++) 
      { 

       var newDIV = document.createElement('div'); 
       newDIV.setAttribute("id", "c"+(i)); 

       var text = document.createTextNode("New Inserted Child "+(i)); 
       newDIV.appendChild(text); 
       prnt.appendChild(newDIV); 

      } 
     } 

    </script> 

    <title>Checking Div Nodes</title> 
</head> 


<body> 

    <div id="prnt"> 
     Parent 1 

    </div> 

    <br /> 
    <br /> 
    <br /> 

    <button type="button" onclick="displayNodes()">Show Node Info</button> 
    <button type="button" onclick="deleteENodes()">Remove All Element Nodes Under Parent 1</button> 
    <button type="button" onclick="AddENodes()">Add 5 New DIV Nodes</button> 

    <div id="content"> 

    </div> 
</body>

来源

2012-06-23 Saad A

许多DOM注资方式（的childNodes，的getElementsByTagName等）返回的数组是“活”：他们奇迹般地被更新每当文档更改。这可能会导致一些微妙的错误，比如你正在经历的错误。 – hugomg

的问题是你通过它修改集合，你循环。迭代反应该解决这个问题...

for(i = chlds.length-1; i >= 0; i--) 
{ 
    if(!(chlds[i].nodeType == 3)) 
    { 
     prnt.removeChild(chlds[i]); 
    } 
}

来源

2012-06-23 03:21:18 McGarnagle

非常感谢你 –

破除的，如果（！（chlds [I] .nodeType == 3））节点类型检查。

你可以做一个.querySelectorAll（“DIV”）仅拉出的div

function deleteENodes() 
     { 

var chlds = document.getElementById("prnt").querySelectorAll('div');<---- 


      for(i = 0; i < chlds.length; i++) 
      { 

        if(!(chlds[i].nodeType == 3)) 
        { 
         prnt.removeChild(chlds[i]); 
        } 

      } 


     }

来源

2012-06-23 03:20:33

的问题是因为你删除节点（从头开始），其余子节点的索引是一个每次递减：

鉴于5个孩子：

Child1 Index0 
Child2 Index1 
Child3 Index2 
Child4 Index3 
Child5 Index4

当你去删除它们，这是发生了什么事

.removeChild(0) removes Child1 
Child2 is now Index0 
Child3 is now Index1 
.... 

next Iteration: 
.removeChild(1) removes Child3 
Child2 is still Index0 
Child4 is now Index1 
Child5 is now Index2 
....

解决方案。从最后一个索引删除孩子，并向0移动。

来源

2012-06-23 03:22:31 BLSully

谢谢解决 –

返回childNodes是“活的” - 删除孩子立即更新列表。

发生了什么事情是，您要删除一个元素，它将列表的长度减1，导致您的循环跳过一个元素。

避免这种情况的一种方法是将元素复制到Array。

E.g.

var nodes = []; 
for (var i = 0; i < chlds.length; i++) { 
    nodes.push(chlds[i]); 
} 

for(i = 0; i < nodes.length; i++) 
{ 
    if(!(nodes[i].nodeType == 3)) 
    { 
    prnt.removeChild(nodes[i]); 
    } 
}

来源

2012-06-23 03:24:50 jimr

Javascript .removeChild（）只会删除偶数节点？

回答

相关问题