逆引きマニュアル: JavaScript/DOMで子要素を全て削除する方法

やりたいこと

JavaScriptでDOM(Document Object Model)を操作して、 ある要素の子要素を全て削除する方法です。

手順

手っ取り早いのが、innerHTMLに空文字列を代入する方法です。

element.innerHTML = "";

もう一つは、removeChildを使って削除する方法です。

• Remove all child elements of a DOM node in JavaScript - Stack Overflow

var myNode = document.getElementById("foo");
while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
}

補足

innerHTMLは元々はIE独自仕様で、規格は決まっていない(Draft段階)のですが、 他のブラウザでも実装されており、互換性は問題ないと思います。 ただ、パフォーマンスは劣るようです。 自分のマシンだと5倍くらい遅かったです。

• innerHTML vs removeChild

マニュアル

• JavaScript
• Document Object Model(DOM)