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

JavaScriptで既存のHTML要素を削除する方法【removeChild()の使い方を解説】

既存のHTML要素を削除するには、removeChild()メソッドを使用する必要があります。このメソッドは、親要素から任意の子要素を取り除くことができます。

構文

removeChild(element);

引数として削除したい要素を渡すと、その要素がDOMから取り除かれます。

使用例

次の例では、div要素内に最初は2つのテキスト（p要素）が含まれています。しかし、removeChild()メソッドを実行すると、そのうちの1つが削除され、div要素内には1つのテキストだけが残ります。出力結果では、残ったテキストが表示されます。

<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
    var parent = document.getElementById("new");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>
</body>
</html>

実行結果

Tutorialspoint

補足：より新しいremove()メソッド

近年のモダンブラウザでは、親要素を意識せずに要素自身を直接削除できるremove()メソッドも利用できます。例えば「document.getElementById("p1").remove();」のように記述するだけで、対象の要素をDOMから簡単に削除できます。ただし、古いブラウザとの互換性が必要な場合は、引き続きremoveChild()を使用するのが安全です。

  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. JavaScriptでDOMノードのすべての子要素を一括削除する方法

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