JavaScript: enlevez l'élément par son id

Question

Lors de la suppression d'un élément avec JavaScript standard, vous devez aller à elle, parent du premier:

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

Avoir à passer par le nœud parent du premier semble un peu étrange pour moi, est-ce une raison JavaScript fonctionne comme ceci?

Answer 1

Je sais qu'en augmentant les natifs de DOM fonctions n'est pas toujours la meilleure ou la plus populaire de la solution, mais cela fonctionne très bien pour les navigateurs modernes.

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = 0, len = this.length; i < len; i++) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

Et puis vous pouvez supprimer des éléments comme ceci

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 de la DOM lire cet article.

Answer 2

Crossbrowser:

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

Answer 3

Vous pourriez faire une fonction qui fait la suppression pour vous afin que vous ne pas avoir à penser à elle à chaque fois.

la fonction supprimer(id)
{
 retour (elem=document.getElementById(id)).parentNode.removeChild(elem);
}

Answer 4

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 la classe:

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