JavaScript で HTML 要素を効率的に削除するにはどうすればよいですか?

要素の簡単な削除:nativeDOM とnode.remove() の探索

JavaScript で HTML 要素を削除するというタスクがある場合、長い間、奇妙に感じられるのは、最初に親ノードを選択する必要があることです。最近まで、標準的な方法には次のコードが必要でした。

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

改良されたアプローチ

最新のブラウザの場合、ネイティブ 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]);
        }
    }
}

これで、要素の削除はBrey:

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

または

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

node.remove() の勝利

最近の更新では、node.remove( ) はこのタスクの救世主として登場し、以下を除くすべての最新ブラウザで利用できます。 IE:

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

または

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

これらのソリューションは IE 7 以前では機能しない可能性がありますが、DOM から要素を削除するよりスムーズで論理的な方法を提供します。より効率的で簡単なコーディング エクスペリエンスの背後にあります。

以上がJavaScript で HTML 要素を効率的に削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。