JavaScript removeChild() の実践的な例

概要：このチュートリアルでは、JavaScript の removeChild() メソッドを使用して、親ノードから子ノードを削除する方法を学びます。

JavaScript removeChild() メソッドの概要

ノードの子要素を削除するには、removeChild() メソッドを使用します。

let childNode = parentNode.removeChild(childNode);Code language: JavaScript (javascript)

childNode は、削除したい parentNode の子ノードです。childNode が parentNode の子ノードでない場合、メソッドは例外をスローします。

removeChild() は、DOM ツリーから削除された子ノードを返しますが、メモリには保持され、後で使用できます。

削除された子ノードをメモリに保持したくない場合は、次の構文を使用します。

parentNode.removeChild(childNode);Code language: JavaScript (javascript)

子ノードは、JavaScript のガベージコレクターによって破棄されるまでメモリに残ります。

JavaScript removeChild() メソッドの例

次の項目のリストがあるとします。

<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About Us</li>
</ul>Code language: HTML, XML (xml)

次の例では、removeChild() を使用して最後のリスト項目を削除します。

let menu = document.getElementById('menu');
menu.removeChild(menu.lastElementChild);Code language: JavaScript (javascript)

仕組み

最初に、getElementById() メソッドを使用して、ID が menu の ul 要素を取得します。
次に、removeChild() メソッドを使用して、ul 要素の最後の要素を削除します。menu.lastElementChild プロパティは、menu の最後の子要素を返します。

すべてをまとめると次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript removeChild()</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Products</li>
        <li>About Us</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        menu.removeChild(menu.lastElementChild);
    </script>
</body>
</html>Code language: HTML, XML (xml)

要素のすべての子ノードを削除する

要素のすべての子ノードを削除するには、次の手順を実行します。

firstChild プロパティを使用して、要素の最初のノードを取得します。
子ノードがなくなるまで、子ノードを繰り返し削除します。

次のコードは、menu 要素からすべてのリスト項目を削除する方法を示しています。

let menu = document.getElementById('menu');
while (menu.firstChild) {
    menu.removeChild(menu.firstChild);}Code language: JavaScript (javascript)

親ノードの innerHTML プロパティを空白に設定することで、要素のすべての子ノードを削除できます。

let menu = document.getElementById('menu');
menu.innerHTML = '';Code language: JavaScript (javascript)

まとめ

parentNode.removeChild() を使用して、親ノードから子ノードを削除します。
子ノードが親ノードに見つからない場合、parentNode.removeChild() は例外をスローします。

クイズ

このチュートリアルは役に立ちましたか？