Question Supprimer l'élément par identifiant


Lorsque vous supprimez un élément avec JavaScript standard, vous devez d'abord aller à son parent:

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

Devoir aller au nœud parent me semble un peu étrange, y a-t-il une raison pour que JavaScript fonctionne comme ça?


905
2017-08-01 18:47


origine


Réponses:


Je sais que l'augmentation des fonctions DOM natives n'est pas toujours la solution la meilleure ou la plus populaire, mais cela fonctionne bien pour 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]);
        }
    }
}

Et puis vous pouvez supprimer des éléments comme celui-ci

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

ou

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

Remarque: cette solution ne fonctionne pas pour IE 7 et ci-dessous. Pour plus d'informations sur l'extension du DOM, lisez ceci article.


500
2017-08-08 07:56



Crossbrowser et IE> = 11:

document.getElementById("element-id").outerHTML = "";

197
2017-10-10 14:28



Vous pourriez faire un remove fonctionner de telle sorte que vous n'ayez pas à y penser à chaque fois:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

130
2017-08-02 19:58



C'est ce que le DOM soutient. Recherchez cette page pour "supprimer" ou "supprimer" et removeChild est le seul qui supprime un noeud.


92
2017-08-01 23:16



Le DOM est organisé en un arbre de nœuds, où chaque nœud a une valeur, avec une liste de références à ses nœuds enfants. Alors element.parentNode.removeChild(element) imite exactement ce qui se passe en interne: d'abord, vous allez sur le nœud parent, puis supprimez la référence au nœud enfant.

Depuis DOM4, une fonction d'aide est prévue pour faire la même chose: element.remove(). Ce fonctionne dans 87% des navigateurs (à partir de 2016), mais pas IE 11. Si vous devez prendre en charge les anciens navigateurs, vous pouvez:


73
2017-12-30 17:41



Pour supprimer un élément:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

Pour supprimer tous les éléments avec par exemple un certain nom de classe:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

33
2017-08-05 08:08



vous pouvez simplement utiliser element.remove()


19
2018-02-28 16:17



le ChildNode.remove() méthode supprime l'objet de l'arbre auquel il appartient.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Voici un violon qui montre comment vous pouvez appeler document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Il n'est pas nécessaire d'étendre NodeList. Il a déjà été implémenté.

**


11
2017-07-28 18:26



Les fonctions qui utilisent ele.parentNode.removeChild (ele) ne fonctionneront pas pour les éléments que vous avez créés mais pas encore insérés dans le code HTML. Les bibliothèques comme jQuery et Prototype utilisent judicieusement une méthode comme celle-ci pour échapper à cette limitation.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

Je pense que JavaScript fonctionne comme ça parce que les concepteurs originaux du DOM ont tenu la navigation parent / enfant et la navigation précédente / suivante comme une priorité plus élevée que les modifications DHTML qui sont si populaires aujourd'hui. Etre capable de lire depuis un <input type = 'text'> et d'écrire dans un autre par emplacement relatif dans le DOM était utile au milieu des années 90, une époque où la génération dynamique de formulaires HTML entiers ou d'éléments interactifs de GUI était à peine scintillante. l'oeil d'un développeur.


6
2017-12-19 06:06



Selon les spécifications du niveau 4 de DOM, qui est la version actuelle en cours de développement, il existe de nouvelles méthodes de mutation pratiques: append(), prepend(), before(), after(), replace(), et remove().

http://red-team-design.com/removing-an-element-with-plain-javascript-remove-method/


4
2017-08-08 14:10