js中删除子元素(数组塌陷)的问题

#######特别铭谢: "塌陷"一词 取自 罗老师 聊天记录

通常我们在删除某个父元素下的若干子元素的时候 习惯使用for循环遍历来实现,但是在 下面的情况确不好使了

<ul id="ull"> <li>nodeList</li> <li>nodeList</li> <li>nodeList</li> <li>nodeList</li> <li>nodeList</li> <li>nodeList</li> <li>nodeList</li> <li>nodeList</li> <li>nodeList</li> <li>nodeList</li> </ul>

原始 效果

Paste_Image.png

var uls = document.getElementById("ull"); var eles = uls.getElementsByTagName("li");
for(vari=0;i<eles.length;i++){ ------eles.item(i).parentNode.removeChild(eles.item(i)); }

执行上面的语句之后 的效果

Paste_Image.png

我们发现 , 虽然 使用了 for 循环,但是只删除了一半 , 这是为什么呢 ? 原因 为下:

我们使用for 循环遍历 eles , 当i=0的时候 , 我们删除了位置为0的元素, 此时,位置为1的元素接替了位置 0 , 但同时 i 也累加 了, 下次执行 删除 操作的时候 i 变为1 , 再次执行删除操作,其实是删除了 现在位置为1 的元素 , 中间跳过了, 所以 最后的结果 只 删除了一半

解决 办法有两种

方法一:

在循环体内让 i-- , 这样每次删除 就是 只删除 位置为0 的元素

for(vari=0;i<eles.length;i++){ ------eles.item(i).parentNode.removeChild(eles.item(i)); ------i--; }

方法二

倒着来,这样每次删除的就是最后一个位置 的元素

for(var i = eles.length-1;i>=0;i--){ eles.item(i).parentNode.removeChild(eles.item(i)); }

效果如下,全部删除

Paste_Image.png