Entferne Element per ID

Question

Bei der Entfernung eines Elements mit Standard-JavaScript müssen Sie zunächst zum übergeordneten Element gehen:

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

Es erscheint mir etwas seltsam, zuerst zum Elternknoten gehen zu müssen. Gibt es einen bestimmten Grund, warum JavaScript so funktioniert?

Answer 1

Ich weiß, dass das Erweitern nativer 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 auf diese Weise entfernen

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

oder

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

Hinweis: Diese Lösung funktioniert nicht für IE 7 und frühere Versionen. Lesen Sie mehr über die Erweiterung des DOM in diesem Artikel.

BEARBEITEN: Bei der Überprüfung meiner Antwort im Jahr 2019 hat node.remove() geholfen und kann wie folgt verwendet werden (ohne das obige Polyfill):

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

oder

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

Diese Funktionen sind in allen modernen Browsern verfügbar (nicht in IE). Erfahren Sie mehr auf MDN.

Answer 2

Quer browser e IE >= 11:

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

Answer 3

Sie könnten eine remove-Funktion erstellen, damit Sie nicht jedes Mal daran denken müssen:

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

Answer 4

element.remove()

Der DOM ist in einem Baum von Knoten organisiert, wobei jeder Knoten einen Wert hat, zusammen mit einer Liste von Verweisen auf seine Kindknoten. Daher ahmt element.parentNode.removeChild(element) genau das nach, was intern passiert: Zuerst gehen Sie zum Elternknoten, dann entfernen Sie den Verweis auf den Kindknoten.

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

• Elemente über den Elternknoten entfernen, wie in der Frage,
• die nativen DOM-Funktionen modifizieren, wie in Johan Dettmars Antwort, oder
• einen DOM4-Polyfill verwenden.

Answer 5

Das ist, was das DOM unterstützt. Suchen Sie auf dieser Seite nach "remove" oder "delete" und removeChild ist der einzige, der einen Knoten entfernt.