Element durch ID entfernen

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

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

Es scheint mir etwas seltsam, zuerst zum übergeordneten Knoten gehen zu müssen. Gibt es einen Grund, warum JavaScript so funktioniert?

Ich weiß, dass das Erweitern nativer DOM-Funktionen nicht immer die beste oder beliebteste Lösung ist, aber dies 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 solche Elemente entfernen

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

oder

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

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

EDIT : Überprüfung meiner Antwort im Jahr 2019, node.remove()ist zur Rettung gekommen und kann wie folgt verwendet werden (ohne die Polyfill oben):

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

oder

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

Diese Funktionen sind in allen modernen Browsern (nicht im Internet Explorer) verfügbar. Lesen Sie mehr über MDN .

Crossbrowser und IE> = 11:

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

Sie könnten eine removeFunktion erstellen, damit Sie nicht jedes Mal darüber nachdenken müssen:

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

Das unterstützt das DOM . Durchsuchen Sie diese Seite nach "entfernen" oder "löschen" und removeChild ist die einzige, die einen Knoten entfernt.

Das DOM ist in einem Knotenbaum organisiert, in dem jeder Knoten einen Wert sowie eine Liste von Verweisen auf seine untergeordneten Knoten hat. Damitelement.parentNode.removeChild(element) ahmt genau das, was intern passiert: Zuerst gehen Sie das die übergeordnete Knoten, dann den Verweis auf den untergeordneten Knoten entfernen.

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

• Entfernen Sie Elemente über den übergeordneten Knoten, wie in der Frage ,
• Ändern Sie die nativen DOM-Funktionen wie in Johan Dettmars Antwort oder
• Verwenden Sie eine DOM4-Polyfüllung .

Zum Entfernen eines Elements:

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

Zum Entfernen aller Elemente mit beispielsweise 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]);

Sie können nur verwenden element.remove()

Die 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/

** **.

NodeList muss nicht erweitert werden. Es wurde bereits implementiert.

** **.

Sie können dieses Element mithilfe remove()der DOM-Methode direkt entfernen .

Hier ist ein Beispiel:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Nach DOM Level 4 Spezifikationen, die die aktuelle Version in der Entwicklung ist, gibt es einige neue handliche Mutationsverfahren zur Verfügung: append(), prepend(), before(), after(), replace(), und remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

Es scheint mir etwas seltsam, zuerst zum übergeordneten Knoten gehen zu müssen. Gibt es einen Grund, warum JavaScript so funktioniert?

Der Funktionsname lautet removeChild()und wie kann das Kind entfernt werden, wenn kein Elternteil vorhanden ist? :) :)

Andererseits müssen Sie es nicht immer so nennen, wie Sie es gezeigt haben. element.parentNodeist nur ein Helfer, um den übergeordneten Knoten des angegebenen Knotens abzurufen. Wenn Sie den übergeordneten Knoten bereits kennen, können Sie ihn einfach folgendermaßen verwenden:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

================================================== =======

Um noch etwas hinzuzufügen:

Einige Antworten haben darauf hingewiesen, dass Sie anstelle von verwenden parentNode.removeChild(child);könnenelem.remove(); . Aber wie ich bemerkt habe, gibt es einen Unterschied zwischen den beiden Funktionen, und er wird in diesen Antworten nicht erwähnt.

Wenn Sie verwenden removeChild(), wird ein Verweis auf den entfernten Knoten zurückgegeben.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

Wenn Sie jedoch verwenden elem.remove();, wird die Referenz nicht zurückgegeben.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

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

Dieses Verhalten kann in Chrome und FF beobachtet werden. Ich glaube, es lohnt sich zu bemerken :)

Hoffe, meine Antwort fügt der Frage etwas Wert hinzu und wird hilfreich sein !!

Funktionen, die ele.parentNode.removeChild (ele) verwenden, funktionieren nicht für Elemente, die Sie erstellt, aber noch nicht in den HTML-Code eingefügt haben. Bibliotheken wie jQuery und Prototype verwenden mit Bedacht eine Methode wie die folgende, um diese Einschränkung zu umgehen.

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

Ich denke, JavaScript funktioniert so, weil die ursprünglichen Designer des DOM Eltern / Kind und vorherige / nächste Navigation als höhere Priorität angesehen haben als die heute so beliebten DHTML-Modifikationen. Mitte der 90er Jahre war es nützlich, von einem <input type = 'text'> lesen und nach relativer Position im DOM in einen anderen schreiben zu können. Damals war die dynamische Generierung ganzer HTML-Formulare oder interaktiver GUI-Elemente kaum ein Kinderspiel das Auge eines Entwicklers.

Es scheint mir etwas seltsam, zuerst zum übergeordneten Knoten gehen zu müssen. Gibt es einen Grund, warum JavaScript so funktioniert?

IMHO: Der Grund dafür ist der gleiche wie in anderen Umgebungen: Sie führen eine Aktion aus, die auf Ihrem "Link" zu etwas basiert. Sie können es nicht löschen, während Sie damit verbunden sind.

Als würde man einen Ast schneiden. Setzen Sie sich beim Schneiden auf die Seite, die dem Baum am nächsten liegt, sonst ist das Ergebnis ... unglücklich (obwohl lustig).

Dieser kommt tatsächlich von FireFox ... ausnahmsweise war IE dem Rudel voraus und erlaubte das direkte Entfernen eines Elements.

Dies ist nur meine Annahme, aber ich glaube, der Grund, warum Sie ein Kind über das Elternteil entfernen müssen, liegt in einem Problem mit der Art und Weise, wie FireFox mit der Referenz umgegangen ist.

Wenn Sie ein Objekt aufrufen, um Hari-Kari direkt festzuschreiben, behalten Sie diesen Verweis unmittelbar nach seinem Tod immer noch bei. Dies kann zu mehreren bösen Fehlern führen, z. B. wenn sie nicht entfernt werden, entfernt werden, aber Verweise darauf beibehalten werden, die als gültig erscheinen, oder einfach ein Speicherverlust.

Ich glaube, als sie das Problem erkannten, bestand die Problemumgehung darin, ein Element über das übergeordnete Element zu entfernen, da Sie jetzt, wenn das Element nicht mehr vorhanden ist, einfach einen Verweis auf das übergeordnete Element haben. Dies würde all diese Unannehmlichkeiten stoppen und (wenn zum Beispiel ein Baum Knoten für Knoten geschlossen wird) ziemlich gut "zip-up".

Es sollte ein leicht zu behebender Fehler sein, aber wie bei vielen anderen Dingen in der Webprogrammierung war die Veröffentlichung wahrscheinlich überstürzt, was dazu führte ... und als die nächste Version auf den Markt kam, verwendeten genug Leute sie, um dies zu ändern eine Menge Code zu brechen.

Auch dies alles ist einfach meine Vermutung.

Ich freue mich jedoch auf den Tag, an dem die Webprogrammierung endlich einen vollständigen Frühjahrsputz erhält, all diese seltsamen kleinen Eigenheiten aufgeräumt werden und alle nach den gleichen Regeln spielen.

Wahrscheinlich am Tag nachdem mein Roboterdiener mich wegen rückständiger Löhne verklagt hat.

Soweit ich weiß, funktioniert das direkte Entfernen eines Knotens in Firefox nicht, sondern nur in Internet Explorer. Um Firefox zu unterstützen, müssen Sie zum übergeordneten Element gehen, um das untergeordnete Element zu entfernen.

Ref: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

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

Dies ist die beste Funktion, um ein Element ohne Skriptfehler zu entfernen:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

Hinweis an EObj=document.getElementById(EId).

Dies ist EIN Gleichheitszeichen nicht ==.

Wenn ein Element EIdvorhanden ist, wird es von der Funktion entfernt, andernfalls wird false zurückgegeben, nicht error.