清除元素 - 現代 JavaScript 教學

建立一個函式 clear(elem) 來移除元素中的所有內容。

<ol id="elem">
  <li>Hello</li>
  <li>World</li>
</ol>

<script>
  function clear(elem) { /* your code */ }

  clear(elem); // clears the list
</script>

首先，讓我們看看如何不這樣做

          function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
      elem.childNodes[i].remove();
  }
}
        

這行不通，因為呼叫 remove() 會轉移集合 elem.childNodes，因此元素每次都從索引 0 開始。但 i 會增加，而有些元素會被跳過。

for..of 迴圈也會執行相同的動作。

正確的變體可能是

          function clear(elem) {
  while (elem.firstChild) {
    elem.firstChild.remove();
  }
}
        

還有一個更簡單的方法可以執行相同的動作

          function clear(elem) {
  elem.innerHTML = '';
}
        