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

これは「コードを書いていて困ったときに、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()
}

回答に対しての反応

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