getElementsBy**で取得したDOM要素をすべて削除するにはどうするの?

  • 0
    いいね
  • 4
    コメント

    これは「コードを書いていて困ったときに、suinがチャットで質問に答えたり相談に乗るsuinのプログラミング相談室(仮)」で頂いた質問と僕の回答の要約です。

    質問

    JavaScriptのgetElementsBy**で取得したDOM要素をすべて削除したいのですがうまくいません。
    ※提示していただいたコードの秘密を守るため、下記コードは実際のものとは異なります。

    ネコ科だけ取り除きたい
    <div class="animals">
      <div class="nekoka">ネコ</div>
      <div class="inuka">オオカミ</div>
      <div class="inuka">イヌ</div>
      <div class="inuka">キツネ</div>
      <div class="nekoka">トラ</div>
      <div class="nekoka">ライオン</div>
    </div>
    
    <script>
    // ネコ科の複数のDOM要素が取れる
    const elements = document.getElementsByClassName('nekoka')
    
    console.log(elements.length) // 3
    
    Array.prototype.forEach.call(elements, e => {
      e.remove() // elements自体が減ることでうまくいかない
    })
    </script>
    

    これを実行すると「オオカミ、イヌ、キツネ、ライオン」が残り、ネコ科の「ライオン」が残ってしまいます。いろいろ試してみてできる方法を見つけたのですが、コードが長くなってしまいます。シンプルに解決する良い方法はありませんでしょうか?

    suinの回答

    document.getElementBy**の戻り値はHTMLCollectionオブジェクトです。この中に入っているDOM要素が削除されるとコレクションの長さが変わることを利用して、whileで書くとシンプルに実現できます。

    const elements = document.getElementsByClassName('nekoka')
    while (elements.length) {
      elements.item(0).remove()
    }
    

    回答に対しての反応

    ループ対象の要素が減っていくのを利用して、要素が無くなるまで先頭の要素を削除し続けるわけですね! シンプルで良さそうです。