JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでDOMノードのすべての子要素を削除する方法

JavaScriptでDOMノードの子要素をすべて削除するには？

Web開発をしていると、特定の要素（例えば<div>）の中身を丸ごと空にしたい場面があります。JavaScriptでは、whileループとremoveChild()メソッドを組み合わせることで、子要素をすべて簡単に削除できます。

基本の書き方：whileループとremoveChild()

idが「mList」である要素の子要素をすべて削除するには、次のように記述します。

var list = document.getElementById("mList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

このコードの仕組みは以下の通りです。

  • hasChildNodes()：要素に子ノードが存在するかどうかを判定します。
  • firstChild：最初の子ノードを取得します。
  • removeChild()：指定した子ノードを親要素から削除します。

子ノードがなくなるまでこの処理を繰り返すことで、指定した要素のすべての子要素が削除されます。

実装例

実際のHTMLファイルでは、次のように記述します。ボタンをクリックすると、div要素内のリスト項目がすべて消えます。

<html>
  <body>
    <div id="mList" style="width:400px;background-color:gray">
      <ul>
        <li>li- child</li>
        <li>li- child</li>
      </ul>
    </div>
    <button onclick="mFunction()">Submit</button>
    <script>
      function mFunction() {
        var list = document.getElementById("mList");
        while (list.hasChildNodes()) {
          list.removeChild(list.firstChild);
        }
      }
    </script>
  </body>
</html>

よりシンプルな代替手段

近年のブラウザでは、さらに簡潔に書ける方法もあります。状況に応じて使い分けましょう。

1. innerHTMLを使う方法

document.getElementById("mList").innerHTML = "";

中身を空文字列に置き換えるだけで、子要素がすべて削除されます。最も手軽で広く使われている方法です。

2. replaceChildren()を使う方法（モダンブラウザ対応）

document.getElementById("mList").replaceChildren();

引数なしで呼び出すと、すべての子ノードが一括で削除されます。意図が明確で可読性が高いため、新しいプロジェクトではこちらが推奨されます。

まとめ

  • 従来の方法：hasChildNodes()とremoveChild()をwhileループで繰り返す
  • 簡潔な方法：innerHTMLに空文字列を代入する
  • モダンな方法：replaceChildren()を引数なしで呼び出す

対応ブラウザやコードの方針に応じて、最適な方法を選択してください。

  1. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <

  2. JavaScriptでDOMノードのすべての子要素を一括削除する方法

    JavaScriptでDOMノードからすべての子要素を削除したい場合は、親要素のinnerHTMLに空文字列（''）を設定するのが最もシンプルで手軽な方法です。これにより、その要素の中身が丸ごとクリアされます。 サンプルコード 実際に動作するコードを見てみましょう。ボタンをクリックすると、赤い枠のボックス内の子要素がすべて削除される仕組みです。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="U