Frage Entfernen Sie das Element nach ID


Wenn Sie ein Element mit Standard-JavaScript entfernen, müssen Sie zuerst zu seinem übergeordneten Element gehen:

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

Zuerst zum übergeordneten Knoten zu gehen, erscheint mir etwas merkwürdig, gibt es einen Grund, warum JavaScript so funktioniert?


905
2017-08-01 18:47


Ursprung


Antworten:


Ich weiß, dass das Verbessern von nativen DOM-Funktionen nicht immer die beste oder beliebteste Lösung ist, aber das funktioniert gut für moderne Browser.

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

Und dann können Sie Elemente wie dieses entfernen

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

oder

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

Hinweis: Diese Lösung funktioniert nicht für IE 7 und darunter. Weitere Informationen zum Erweitern des DOM finden Sie hier Artikel.


500
2017-08-08 07:56



Crossbrowser und IE> = 11:

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

197
2017-10-10 14:28



Du könntest einen machen remove Funktion, damit Sie nicht jedes Mal darüber nachdenken müssen:

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

130
2017-08-02 19:58



Es ist, was das DOM unterstützt. Suchen Sie diese Seite nach "Entfernen" oder "Löschen" und removeChild ist die einzige, die einen Knoten entfernt.


92
2017-08-01 23:16



Das DOM ist in einer Baumstruktur von Knoten organisiert, wobei jeder Knoten einen Wert zusammen mit einer Liste von Referenzen auf seine Kindknoten aufweist. Damit element.parentNode.removeChild(element) ahmt genau nach, was intern passiert: Zuerst gehst du den Elternknoten und entfernst dann den Verweis auf den Kindknoten.

Ab DOM4 wird eine Hilfsfunktion bereitgestellt, um dasselbe zu tun: element.remove(). Dies funktioniert in 87% der Browser (Stand 2016), aber nicht IE 11. Wenn Sie ältere Browser unterstützen müssen, können Sie:


73
2017-12-30 17:41



Um ein Element zu entfernen:

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

Zum Entfernen aller Elemente mit zB einem bestimmten Klassennamen:

 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



Du kannst es einfach benutzen element.remove()


19
2018-02-28 16:17



Das ChildNode.remove() Methode entfernt das Objekt aus dem Baum, zu dem es gehört.

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

Hier ist eine Geige, die zeigt, wie Sie anrufen können document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Es ist nicht notwendig, NodeList zu erweitern. Es wurde bereits implementiert.

**


11
2017-07-28 18:26