2

ID="prnt" の DIV の下に子 DIV を動的に追加しようとしています。ノードの追加は問題なく動作します。しかし、削除されたノードに関しては、0 を含む偶数番号のノードのみを削除するのは非常に奇妙です。私は非常に間違っている可能性があります。

    <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>

4

4 に答える 4

3

問題は、コレクションをループするときにコレクションを変更していることです。逆に繰り返すとこれが修正されます...

for(i = chlds.length-1; i >= 0; i--)
{
    if(!(chlds[i].nodeType == 3))
    {
         prnt.removeChild(chlds[i]);
    }
}
于 2012-06-23T03:21:18.223 に答える
0

if(!(chlds[i].nodeType == 3)) nodeType チェックを廃止します。

.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-23T03:20:33.960 に答える
0

問題は、(最初から) ノードを削除しているとき、残りの子ノードのインデックスが毎回 1 ずつ減少していることです。

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-23T03:22:31.870 に答える
0

NodeListによって返されるchildNodesは「ライブ」です。子を削除すると、リストがすぐに更新されます。

何が起こっているかというと、要素を削除しているため、リストの長さが 1 減り、ループで要素がスキップされます。

これを回避する 1 つの方法は、要素を にコピーすることArrayです。

例えば

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-23T03:24:50.413 に答える