Comment puis-je supprimer efficacement des éléments par ID en JavaScript ?

Suppression d'éléments par ID en JavaScript : une alternative pratique

En JavaScript, la méthode standard pour supprimer un élément nécessite de parcourir jusqu'à son nœud parent :

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

Cette approche nécessite une étape supplémentaire pour accéder au parent, ce qui peut s'avérer inefficace. Cet article explore une alternative qui simplifie la suppression des éléments en ajoutant une méthode Remove au prototype Element.

En étendant les prototypes Element et NodeList, vous pouvez introduire la méthode Remove à tous les éléments et collections HTML :

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]);
        }
    }
}

Avec cet ajout, vous pouvez désormais supprimer des éléments directement :

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

Ou pour plusieurs éléments :

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

Remarque : Cette solution n'est pas prise en charge par IE 7 et versions antérieures.

Mise à jour (2019) : Node.js a introduit la fonction node.remove(), rendant la suppression d'éléments encore plus simple :

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

Ou pour collections :

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

Cette approche mise à jour est largement prise en charge par les navigateurs modernes, notamment Chrome, Firefox, Edge et Safari.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!