JavaScript でノードから子要素を効率的に削除するにはどうすればよいですか?

JavaScript DOM の子要素の削除

JavaScript で DOM を操作する場合、特定のノードから子要素を削除する必要があるシナリオが発生することがあります。このガイドでは、このタスクに対処するさまざまなアプローチについて説明します。

方法 1: innerHTML をクリアする

簡単な方法の 1 つは、親ノードの innerHTML プロパティを空の文字列に設定することです。この方法は単純ではありますが、ブラウザの HTML パーサーをトリガーするため、高パフォーマンスのアプリケーションには適していない可能性があります。

const myNode = document.getElementById("foo");
myNode.innerHTML = "";

HTML の例:

<div>
<h3>方法 2: すべての子ノードを個別に削除する</h3>
<p>より詳細なアプローチは、removeChild() を使用して各子ノードを個別に削除することです。 </p>
<pre class="brush:php;toolbar:false">const myNode = document.getElementById("foo");
while (myNode.hasChildNodes()) {
  myNode.removeChild(myNode.lastChild);
}

方法 3: QuerySelectorAll() を使用した組み合わせアプローチ

削除する特定の子要素がわかっている場合は、removeChild() と querySelectorAll() を組み合わせてターゲットを指定できます。より効率的に削除できます。

const myNode = document.getElementById("foo");
const childElements = myNode.querySelectorAll("span, div");
childElements.forEach((element) => {
  myNode.removeChild(element);
});