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

概要: このチュートリアルでは、JavaScript DOMメソッドを使用してノードのすべての子ノードを削除する方法を学習します。

ノードのすべての子ノードを削除するには、次の手順に従います。

まず、最初の子ノード (firstChild) を選択し、removeChild() メソッドを使用して削除します。最初の子ノードが削除されると、次の子ノードは自動的に最初の子ノードになります。
次に、子ノードが残らなくなるまで、最初の手順を繰り返します。

次の removeAllChildNodes() 関数は、ノードのすべての子ノードを削除します。

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}Code language: PHP (php)

次のHTMLドキュメントがあるとします。

<html lang="en">
<head>
  <title>Remove All Child Nodes</title>
</head>
<body>
  <div id="container">
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
  </div>
</body>
</html>Code language: HTML, XML (xml)

次のスクリプトは、IDが container の <div> のすべての子ノードを削除します。

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}
const container = document.querySelector('#container');
removeAllChildNodes(container);Code language: PHP (php)

注意: innerHTML

次のコードも、ノードのすべての子ノードを削除します。

parent.innerHTML = '';Code language: PHP (php)

ただし、子ノードのイベントハンドラーが削除されないため、メモリリークが発生する可能性があるため、お勧めしません。

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