#######特别铭谢: "塌陷"一词 取自 罗老师 聊天记录
通常我们在删除某个父元素下的若干子元素的时候 习惯使用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
