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

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

Barbara Streisand

リリース： 2024-12-18 17:31:11

オリジナル

583 人が閲覧しました

How to Efficiently Remove DOM Elements by ID in JavaScript?

ネイティブ JavaScript を使用して ID で要素を削除する方法

標準 JavaScript では、DOM から要素を削除するには、その親ノードにアクセスする必要があります最初に:

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

ログイン後にコピー

このアプローチは少し複雑なようで、次のような疑問が生じます。 JavaScript はこのように設計されていますか?

解決策: DOM 関数の拡張

ネイティブ 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]);
        }
    }
}

ログイン後にコピー

このポリフィルを使用すると、要素を削除できます便利な方法:

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

ログイン後にコピー

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

ログイン後にコピー

注: このソリューションは IE 7 以前では機能しません。

最新のソリューション: Node.remove()

最近のブラウザでは、node.remove() 関数を使用して次のことができます。ポリフィルなしで使用できます:

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

ログイン後にコピー

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

ログイン後にコピー

これらの関数は、IE を除くすべての最新のブラウザーでサポートされています。詳細については、MDN ドキュメントを参照してください。

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