要素をクリアする

要素からすべてを削除する関数 clear(elem) を作成してください。

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

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

  clear(elem); // リストをクリアします
</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 = '';
}
        