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

Funktionen, die ele.parentNode.removeChild(ele) verwenden, funktionieren nicht für Elemente, die Sie erstellt, aber noch nicht in das HTML eingefügt haben. Bibliotheken wie jQuery und Prototype verwenden weise einen folgenden Ansatz, um diese Einschränkung zu umgehen.

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

Ich glaube, dass JavaScript so funktioniert, weil die ursprünglichen Designer des DOM die Navigation zwischen Eltern/Kindern und vorherigen/nächsten Elementen höher priorisierten als die DHTML-Modifikationen, die heute so beliebt sind. Die Fähigkeit, von einem zu lesen und an einem anderen anhand der relativen Position im DOM zu schreiben, war in den 90er Jahren nützlich, als die dynamische Generierung von gesamten HTML-Formularen oder interaktiven GUI-Elementen kaum mehr war als eine Idee in manchem Entwicklerkopf.

Answer 2

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

Der Funktionsname lautet removeChild(), aber wie ist es möglich, das Kind zu entfernen, wenn kein Elternteil vorhanden ist? :)

Andererseits musst du es nicht immer so aufrufen, wie du gezeigt hast. element.parentNode ist nur eine Hilfe, um den Elternknoten des angegebenen Knotens zu erhalten. Wenn du den Elternknoten bereits kennst, kannst du ihn einfach so verwenden:

Beispiel:

// Entfernen eines bestimmten Elements, wenn der Elternknoten bekannt ist
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

\=========================================================

Noch etwas hinzuzufügen:

Einige Antworten haben darauf hingewiesen, dass anstelle von parentNode.removeChild(child); auch elem.remove(); verwendet werden kann. Aber wie ich festgestellt habe, gibt es einen Unterschied zwischen den beiden Funktionen, der in diesen Antworten nicht erwähnt wird.

Wenn du removeChild() verwendest, wird eine Referenz auf den entfernten Knoten zurückgegeben.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //wird das entfernte Kind ausgeben.

Aber wenn du elem.remove(); verwendest, wird dir 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 finde es erwähnenswert :)

Hoffentlich fügt meine Antwort etwas Wertvolles zur Frage hinzu und wird hilfreich sein!!

Answer 3

Sie können einfach verwenden

document.getElementById("elementID").outerHTML="";

Es funktioniert in allen Browsern, sogar im Internet Explorer.

Answer 4

Kürzeste

Ich verbessere die Antwort von Sai Sunder, weil der OP die ID verwendet, was es ermöglicht, getElementById zu vermeiden:

elementId.remove();

box2.remove();          // BOX 2 entfernen

this["box-3"].remove(); // BOX 3 entfernen (für Id mit 'minus' Zeichen)

Meine BOX 1
Meine BOX 2
Meine BOX 3
Meine BOX 4

Answer 5

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

IMHO: Der Grund dafür ist derselbe wie in anderen Umgebungen, die ich kenne: Sie führen eine Aktion basierend auf Ihrer "Verbindung" zu etwas aus. Sie können es nicht löschen, während Sie damit verbunden sind.

Ähnlich dem Abschneiden eines Baumastes. Sitzen Sie auf der Seite, die dem Baum am nächsten ist, während Sie schneiden, oder das Ergebnis wird ... unglücklich sein (obwohl lustig).