JavaScriptでwhileループを使ってDOMノードの子要素を削除する方法

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

while ループと firstChild プロパティ

// 削除したいノードを取得
const parentNode = document.getElementById('parent');

// 最初の子供ノードを取得
let childNode = parentNode.firstChild;

// 子ノードが存在する限りループ処理
while (childNode) {
  // 最初の子供ノードを削除
  parentNode.removeChild(childNode);

  // 次の子供ノードを取得
  childNode = parentNode.firstChild;
}

Node.removeChild() メソッド

// 削除したいノードを取得
const parentNode = document.getElementById('parent');

// 子ノードをすべて取得
const childNodes = parentNode.childNodes;

// 子ノードの数だけループ処理
for (let i = childNodes.length - 1; i >= 0; i--) {
  // 子ノードを削除
  parentNode.removeChild(childNodes[i]);
}

Node.textContent プロパティ

// 削除したいノードを取得
const parentNode = document.getElementById('parent');

// テキストコンテンツを空にする
parentNode.textContent = '';

Element.replaceChildren() メソッド

// 削除したいノードを取得
const parentNode = document.getElementById('parent');

// 空のテキストノードを作成
const emptyTextNode = document.createTextNode('');

// 子ノードをすべて空のテキストノードで置き換える
parentNode.replaceChildren(emptyTextNode);

上記の方法はいずれも、DOMノードのすべての子要素を削除することができます。どの方法を使うべきかは、状況によって異なります。

• 子ノードの数が多い場合は、while ループと firstChild プロパティを使う方法が効率的です。
• 子ノードの順序を保持したい場合は、Node.removeChild() メソッドを使う方法が適切です。
• 子ノードの内容も削除したい場合は、Node.textContent プロパティを使う方法が簡単です。
• 他の要素と置き換えたい場合は、Element.replaceChildren() メソッドを使う方法が便利です。

注意点

• 子ノードを削除すると、その子ノードに関連するイベントハンドラも削除されます。
• 子ノードを削除する前に、必要なデータを保存しておく必要があります。

<div id="parent">
  <p>子要素1</p>
  <p>子要素2</p>
  <p>子要素3</p>
</div>

// 削除したいノードを取得
const parentNode = document.getElementById('parent');

// 最初の子供ノードを取得
let childNode = parentNode.firstChild;

// 子ノードが存在する限りループ処理
while (childNode) {
  // 最初の子供ノードを削除
  parentNode.removeChild(childNode);

  // 次の子供ノードを取得
  childNode = parentNode.firstChild;
}

// 結果
// <div id="parent"></div>

このコードを実行すると、#parent 要素の子要素すべてが削除され、空の要素になります。

上記以外にも、さまざまな方法でDOMノードの子要素を削除することができます。以下のコードは、他の方法を使ったサンプルコードです。

// 削除したいノードを取得
const parentNode = document.getElementById('parent');

// 子ノードをすべて取得
const childNodes = parentNode.childNodes;

// 子ノードの数だけループ処理
for (let i = childNodes.length - 1; i >= 0; i--) {
  // 子ノードを削除
  parentNode.removeChild(childNodes[i]);
}

// 削除したいノードを取得
const parentNode = document.getElementById('parent');

// テキストコンテンツを空にする
parentNode.textContent = '';

// 削除したいノードを取得
const parentNode = document.getElementById('parent');

// 空のテキストノードを作成
const emptyTextNode = document.createTextNode('');

// 子ノードをすべて空のテキストノードで置き換える
parentNode.replaceChildren(emptyTextNode);

これらのコードは、それぞれ異なる方法でDOMノードの子要素を削除しますが、結果は同じになります。

JavaScriptでDOMノードのすべての子要素を削除するには、さまざまな方法があります。どの方法を使うべきかは、状況によって異なります。上記の説明とサンプルコードを参考に、適切な方法を選択してください。

DOMノードの子要素を削除するその他の方法

Node.remove() メソッドは、DOMノードとその子孫すべてを削除します。この方法は、比較的新しい方法ですが、多くのブラウザでサポートされています。

// 削除したいノードを取得
const nodeToRemove = document.getElementById('nodeToRemove');

// ノードとその子孫すべてを削除
nodeToRemove.remove();

Element.innerHTML プロパティは、要素のHTMLコンテンツを設定します。空文字列を代入すると、要素の子要素すべてが削除されます。

// 削除したいノードを取得
const parentNode = document.getElementById('parentNode');

// 子要素すべてを削除
parentNode.innerHTML = '';

jQuery ライブラリを使用している場合は、$.remove() メソッドを使ってDOMノードの子要素を削除することができます。

// 削除したいノードを取得
const $nodeToRemove = $('#nodeToRemove');

// ノードとその子孫すべてを削除
$nodeToRemove.remove();

• 多くのブラウザでサポートされている新しい方法を使いたい場合は、Node.remove() メソッドを使うのがおすすめです。
• シンプルな方法を使いたい場合は、Element.innerHTML プロパティを使うのが簡単です。