removeChild踩坑记

<ul id="list">
  <li>苹果</li>
  <li>梨</li>
  <li>草莓</li>
  <li>香蕉</li>
</ul>
<button onclick="remove()">移除子节点</button>

我们要移除ul的子节点li。用removeChild的话，惯性思维我会这样：

 function remove() {
   var list = document.getElementById('list');
   var li = list.getElementsByTagName('li');
   for (var i = 0; i < li.length; i++) {
     list.removeChild(li[i]);
   }
 }

这时，我会发现，每次移除都不彻底。随着子节点的个数增加，你会发现没被移除的子节点越多。 每次剩余的子节点都是总个数的一半。
打开浏览器debug就会发现：循环每执行一次，li.length的值都会减少1。这个正是我没办法完全移除子节点的原因。removeChild移除子元素长度一直再变化，其实每次removeChild移除的都是第一个子元素。所以，相应的，我们只要简单的把for循环做下调整：

  for (var i = 0; i < li.length;) {
     list.removeChild(li[i]);
  }

这样，每次for循环删除的都是第一个子元素。