Wie entferne ich DOM-Elemente effizient nach ID in JavaScript?

So entfernen Sie ein Element anhand seiner ID mit nativem JavaScript

In Standard-JavaScript erfordert das Entfernen eines Elements aus dem DOM den Zugriff auf seinen übergeordneten Knoten Erstens:

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

Dieser Ansatz erscheint etwas kompliziert und wirft die Frage auf: Warum ist JavaScript so konzipiert? Weg?

Die Lösung: DOM-Funktionen erweitern

Während das Ändern nativer DOM-Funktionen nicht immer ideal ist, funktioniert die folgende Polyfüllung nahtlos in modernen Browsern:

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

Mit dieser Polyfüllung können Sie Elemente entfernen bequem:

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

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

Hinweis: Diese Lösung funktioniert nicht in IE 7 und niedriger.

Moderne Lösung: Node.remove()

In neueren Browsern kann die Funktion node.remove() ohne verwendet werden polyfill:

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

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

Diese Funktionen werden von allen modernen Browsern außer IE unterstützt. Weitere Einzelheiten finden Sie in der MDN-Dokumentation.

Das obige ist der detaillierte Inhalt vonWie entferne ich DOM-Elemente effizient nach ID in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!