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

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

JavaScriptでDOMノードからすべての子要素を削除したい場合は、親要素のinnerHTMLに空文字列（''）を設定するのが最もシンプルで手軽な方法です。これにより、その要素の中身が丸ごとクリアされます。

サンプルコード

実際に動作するコードを見てみましょう。ボタンをクリックすると、赤い枠のボックス内の子要素がすべて削除される仕組みです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id='removeAllChildElements' style="height: 200px; width: 200px; border: 1px solid red;">
<span>javascript</span>
<div>MySQL</div>
</div>
<button id='remove'>要素を削除する</button>
</body>
<script>
    remove.onclick = () => {
       const element = document.getElementById("removeAllChildElements");
       element.innerHTML = '';
    }
</script>
</html>

プログラムの実行手順

上記のプログラムを実行するには、ファイル名をindex.htmlなど任意の名前で保存してください。その後、VS Codeエディタ上でファイルを右クリックし、「Open with Live Server」を選択すると、ブラウザでページが開きます。

実行結果

ページを開くと、まず次のように表示されます。

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

この状態で「要素を削除する」ボタンをクリックしてみてください。innerHTMLに空文字列が設定され、ボックス内のタグやdivタグなど、すべての子要素が一括で取り除かれます。

削除後の出力

ボタンクリック後は、次のように中身が空になった状態になります。

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

補足：innerHTML以外の削除方法

innerHTMLを使う方法以外にも、子要素を削除する手段はいくつかあります。

  • textContentに空文字列を代入する： element.textContent = ''; こちらも同様に全ての子ノードを削除でき、XSSのリスクを考慮しない場合に安全です。
  • replaceChildren()メソッドを使う： 比較的新しいブラウザで利用できるモダンなAPIで、element.replaceChildren(); と呼び出すだけで子ノードをすべて削除できます。

用途や対応ブラウザに応じて、これらの方法を使い分けると良いでしょう。

  1. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in

  2. HTML DOM Select remove()メソッドの使い方を徹底解説！ドロップダウンリストから選択肢を削除する方法

    HTML DOM の select remove() メソッドは、HTML ドキュメント内のドロップダウンリスト（<select> 要素）から、指定したオプション（選択肢）を削除するためのメソッドです。ユーザーの操作に応じて動的にリストの内容を変更したい場合に非常に便利です。 構文 remove() メソッドの基本的な構文は以下のとおりです。 object.remove(index) index には、削除したいオプションのインデックス番号を指定します。インデックスは 0 から始まる点に注意してください。つまり、最初の選択肢を削除する場合は「0」、2番目の選択肢を削除する場合は「1