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

JavaScript での ID による要素の削除: 便利な代替手段

JavaScript では、要素を削除する標準的な方法では、親ノードまでトラバースする必要があります。

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

このアプローチでは、親にアクセスするための追加の手順が必要となり、非効率的になる可能性があります。この記事では、Remove メソッドを Element プロトタイプに追加することで、要素の削除を簡素化する代替案を検討します。

Element および NodeList プロトタイプを拡張することで、すべての HTML 要素とコレクションに Remove メソッドを導入できます。

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 以前ではサポートされていません。

更新 (2019): Node.js node.remove() 関数が導入され、要素の削除が均一になりました。より簡単な方法:

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

またはコレクションの場合:

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

この更新されたアプローチは、Chrome、Firefox、Edge、Safari などの最新のブラウザーで広くサポートされています。

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