JavaScriptで特定の要素の子要素をすべて削除する方法

本ページでは、特定のDOMの子ノードをすべて削除する方法について説明します。

方法 #

以下のような関数を定義して利用します。 ( MDNに記載がありました )

function removeAllChildNodes(target) {
    while (target.firstChild) {
        target.removeChild(target.firstChild);
    }
}

あるいは以下の関数でも動くようです (最初はこちらを掲載していたのですが、後から調べたらMDNに上記のもっと良い例があった)。

function removeAllChildNodes(target) {
    Array.from(target.childNodes).forEach((child) => {
        target.removeChild(child);
    })
}

引数に与えたDOMに紐づいたすべての子要素を削除してくれます。

まず、特定の要素に紐づいたすべてのDOM要素を削除するための関数というものはJavaScript側で準備がされていません。そのためどうしても自作をする必要が出てきます。

removeChild は 特定のDOMから指定された子ノードを削除する関数 です。

本関数はDOMを document.getElementById() などによって取得した際の DOM に備わっている機能です。DOMは Node と呼ばれるインターフェイスを実装しており、そのインターフェイスにおいて本関数(プロパティ)が規定されています。

引数として渡したDOMが子要素ではない場合などには例外が送出されます。

特定の要素に紐づいている子要素をすべて削除するには、すべての子要素に対してこの関数を呼び出せばよいのです。

firstChild は同じくNodeインターフェイスに定義されているプロパティであり、 対象のDOMの子要素のうち一番初めのものを取得できる ものです。

例えば以下のような場合、 <main> の firstChild は div となります。

<main>
    <div>first child</div>
    <span>second child</span>
    <h3>third child</h3>
</main>

本プロパティは子要素が存在しない場合に null を返却します。

本ページのコードでは対象DOMの子要素を順次削除していって、何もなくなった時にこの null が返されます。この動作により while の条件が false となりループ終了の条件となるわけです。

2つ目の例で利用されているプロパティについてです。

childNodes も同じく Node インターフェイスにおいて定義されているプロパティであり、 対象DOMのすべての子要素が返却される ものです。

ただし、配列とは異なり NodeList という形式のデータが返却されるため、一度 Array.from() を利用して配列として変換して forEach を呼び出しています。

Array.from に関しては下記記事に記述があります。