Javascript .removeChild() удаляет только узлы только?

Я пытаюсь динамически добавлять детей DIV под DIV с ID = "prnt". Добавление узлов работает нормально, никаких проблем. Как ни странно, когда дело доходит до удаленных узлов, он удаляет только четные узлы, включая 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 mathods (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 [я] .nodeType == 3)) NODETYPE проверить.

Вы можете потянуть только дивы, делая .querySelectorAll («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

спасибо разрешено –

NodeList, который был отправлен 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() удаляет только узлы только?

ответ

Смежные вопросы