☰

IDで要素を削除する 質問する

tag-icon • tag-icon javascript dom
IDで要素を削除する 質問する

標準の JavaScript を使用して要素を削除する場合は、まずその親に移動する必要があります。

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

最初に親ノードに移動する必要があるのは少し奇妙に思えますが、JavaScript がこのように動作する理由はあるのでしょうか?

ベストアンサー1

ネイティブ DOM 関数を拡張することが常に最善または最も人気のあるソリューションであるとは限らないことは承知していますが、これは最新のブラウザでは問題なく機能します。

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

そして、このように要素を削除できます

document.getElementById("my-element").remove();

または

document.getElementsByClassName("my-elements").remove();

注意:この解決策はIE 7以下では機能しません。DOM拡張の詳細については、こちらをお読みください。記事。

編集: 2019 年の私の回答を確認すると、node.remove()助けになり、次のように使用できます (上記のポリフィルなし):

document.getElementById("my-element").remove();

または

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

これらの機能は、すべての最新ブラウザ（IEを除く）で利用できます。詳しくは翻訳。

おすすめ記事