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

JavaScriptで要素の子ノードを削除する方法（removeChildメソッドの使い方）

JavaScriptでは、リストなどの要素から子ノードを削除するために、removeChild() メソッドが用意されています。このメソッドを使うと、リスト内の項目をインデックス位置を指定して自由に削除できます。本記事では、その基本的な使い方を具体例とともにわかりやすく解説します。

構文

node.removeChild(node);

親ノードに対して removeChild() を呼び出し、引数として削除したい子ノードを渡します。戻り値として、削除されたノードが返されます。

例1：指定した位置の子ノードを削除する

次の例では、リストに 3つの要素 が存在しますが、子ノードを1つ削除した後は残りの 2つの要素 のみが出力として表示されます。

<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<script>
   var list = document.getElementById("list");
   list.removeChild(list.childNodes[1]);
</script>
</body>
</html>

出力結果

Tesla
Solarcity

ここでは childNodes[1] を指定しているため、リストの2番目の項目「Spacex」が削除され、「Tesla」と「Solarcity」だけが残ります。なお、childNodes にはテキストノード（改行や空白）も含まれる場合があるため、実際の開発では children コレクションや querySelector() を使って対象を特定するとより安全です。

例2：最初の子ノードを削除する

次の例でも同様に、リストには 3つの要素 がありますが、removeChild() メソッドを使って最初の子ノードを削除すると、残った 2つの要素 が出力として表示されます。

<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<script>
   var list = document.getElementById("list");
   list.removeChild(list.childNodes[0]);
</script>
</body>
</html>

出力結果

Spacex
Solarcity

childNodes[0] を指定することで、リストの先頭にある項目が削除されます。このように removeChild() メソッドを使えば、任意の位置の子ノードを柔軟に操作できます。モダンなJavaScriptでは、より簡潔に書ける element.remove() メソッドも利用できるので、用途に応じて使い分けるとよいでしょう。

  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