[解決済み] JavaScript で DOM ノードのすべての子要素を削除する

質問

JavaScript で DOM ノードの子要素をすべて削除するには、どうすればよいでしょうか。

次のような（醜い）HTMLがあるとします。

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

そして、このように必要なノードを取得します。

var myNode = document.getElementById("foo");

の子を削除するにはどうしたらよいですか？ foo のみとなるように <p id="foo"></p> が残っているのですか？

していただけませんか。

myNode.childNodes = new Array();

を使うべきか、それとも removeElement ?

DOMだけの答えと一緒に、jQueryでの答えも提示してくれると、さらにポイントが上がります。

どのように解決するのですか？

選択肢1 A：クリア innerHTML .

• この方法は単純ですが、ブラウザの HTML パーサーを呼び出すため、高性能なアプリケーションには適さないかもしれません（ただし、ブラウザの かもしれません。 値が空文字列の場合に最適化されます)。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

オプション1 B：クリアリング textContent

• 上記と同様ですが .textContent . MDNによると よりも高速になります。 innerHTML ブラウザは HTML パーサーを起動せず、要素のすべての子要素を即座に単一の #text ノードがあります。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

オプション2 A: ループですべてのファイルを削除する lastChild :

• この回答に対する以前の編集では firstChild を使用するように更新されました。 lastChild コンピュータサイエンスと同じように 一般的に を削除した方が圧倒的に速い。 最後 の要素を削除する方が、最初の要素を削除するよりも簡単です (コレクションの実装方法にもよりますが)。
• をチェックするループが続きます。 firstChild 念のため をチェックする方が早いです。 firstChild よりも lastChild (例えば、要素リストがUAによって有向リンクリストとして実装されている場合)。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

オプション2 B: ループですべてのファイルを削除する lastElementChild :

• このアプローチでは、すべての非 Element (すなわち #text ) 親の子 (ただし、その子孫ではない) - そして、これはあなたのアプリケーションで望ましいかもしれません (例えば、テンプレート命令を格納するためにインラインHTMLコメントを使用するいくつかのテンプレートシステム)。
• この方法は、Internet Explorer が <!-- comments --> をIE9で公開しました。

lastElementChild

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

ボーナス <div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <!-- This comment won't be removed --> <span>Hello <!-- This comment WILL be removed --></span> <!-- But this one won't. --> </div> <button id='doFoo'>Remove via lastElementChild-loop</button> モンキーパッチ

• 新しいメソッドプロパティを Element.clearChildren プロトタイプを呼び出すのを簡略化するために、JavaScript では、単に Element (ここで el.clearChildren() は 任意 HTML要素オブジェクト)。
• (厳密には、これは DOM の標準的な機能でもなければ、欠けている機能でもないので、ポリフィルではなくモンキーパッチです。モンキーパッチは多くの場面で当然ながら推奨されないことに注意してください)。

el

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}