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

Supprimer facilement des éléments : explorer nativeDOM et node.remove()

Lorsqu'il est chargé de supprimer des éléments HTML dans JavaScript, il existe depuis longtemps une bizarrerie perçue : devoir d'abord sélectionner le nœud parent. Jusqu'à récemment, la méthode standard nécessitait le code suivant :

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

Une approche améliorée

Pour les navigateurs modernes, l'augmentation des fonctions natives du DOM offre une solution qui semble plus intuitif :

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

Désormais, supprimer des éléments devient un brise :

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

ou

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

Le triomphe de node.remove()

Dans une mise à jour récente, node.remove( ) s'est imposé comme le sauveur de cette tâche, disponible dans tous les navigateurs modernes à l'exception de IE :

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

ou

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

Bien que ces solutions puissent ne pas fonctionner dans IE 7 et versions antérieures, elles offrent un moyen beaucoup plus fluide et plus logique de supprimer des éléments du DOM, laissant derrière une expérience de codage plus efficace et plus simple.

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!