JS removeChild 遍历时删除元素的常见陷阱与修正方案

DOM 节点动态删除的常见陷阱

假设存在如下 HTML 结构：

 
<ul id="demo">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

如果运行代码1：

 
var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
for (var i = 0; i = liList.length; i++) {
ul.removeChild(liList[i]);
} 

如果上述代码未能达到预期效果，或者出现了类似被欺骗的情况，请查看下方修正后的正确代码以理解原因：

 
var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
var lilength = liList.length;
for (var i = 0; i < lilength; i++) {
ul.removeChild(liList[0]);
}