Comment supprimer efficacement les éléments DOM par ID en JavaScript ?

Comment supprimer un élément par son ID à l'aide de JavaScript natif

En JavaScript standard, la suppression d'un élément du DOM nécessite d'accéder à son nœud parent d'abord :

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

Cette approche semble un peu alambiquée, ce qui soulève la question : pourquoi JavaScript est-il conçu de cette manière manière ?

La solution : extension des fonctions DOM

Bien que la modification des fonctions natives du DOM ne soit pas toujours idéale, le polyfill suivant fonctionne de manière transparente dans les navigateurs modernes :

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 ce polyfill, vous pouvez supprimer des éléments commodément :

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

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

Remarque : Cette solution ne fonctionne pas dans IE 7 et versions antérieures.

Solution moderne : Node.remove()

Dans les navigateurs récents, la fonction node.remove() peut être utilisée sans le polyfill :

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

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

Ces fonctions sont prises en charge par tous les navigateurs modernes, à l'exclusion d'IE. Pour plus de détails, reportez-vous à la documentation MDN.

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!