removeChild踩坑記

嘩嘩的醬紫發表於2019-02-16
REM
<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迴圈刪除的都是第一個子元素。

相關文章