JavaScript で HTML 要素を効率的に削除するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-26 12:53:10

オリジナル

294 人が閲覧しました

How Can I Efficiently Remove HTML Elements in JavaScript?

要素の簡単な削除: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] &amp;&amp; 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 &amp;&amp; n.remove());

ログイン後にコピー

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

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