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

Nach meinem Verständnis funktioniert das direkte Entfernen eines Knotens nicht in Firefox, nur im Internet Explorer. Um also Firefox zu unterstützen, muss man zum Elternknoten gehen, um dessen Kind zu entfernen.

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

Answer 2

Diese stammt tatsächlich aus Firefox... IE war einmal voraus und erlaubte das direkte Entfernen eines Elements.

Das ist nur meine Vermutung, aber ich glaube, der Grund, warum du ein Kind über das Elternelement entfernen musst, liegt an einem Problem mit der Art und Weise, wie Firefox die Referenz behandelt hat.

Wenn du ein Objekt direkt dazu aufforderst, Harakiri zu begehen, dann hältst du unmittelbar nach seinem Tod immer noch auf die Referenz dazu. Dies birgt das Potenzial, mehrere unangenehme Fehler zu erzeugen... wie das Nichtentfernen, das Entfernen, aber das Beibehalten von als gültig erscheinenden Referenzen oder einfach ein Speicherleck.

Ich glaube, als sie das Problem erkannten, war der Workaround, ein Element durch sein Elternelement zu entfernen, denn wenn das Element weg ist, hältst du nur noch eine Referenz zum Elternelement. Das würde all das Unangenehme stoppen und (beim Schließen eines Baumknotens beispielsweise) würde sich das 'zip-up' recht schön machen.

Es sollte ein leicht behebbarer Fehler sein, aber wie bei vielen anderen Dingen in der Webprogrammierung wurde die Veröffentlichung wahrscheinlich überstürzt durchgeführt, was zu diesem... und bis zur nächsten Version nutzen es bereits genug Leute, sodass eine Änderung zu einem Bruchteil des Codes führen würde.

Auch hierbei handelt es sich einfach um meine Spekulationen.

Dennoch freue ich mich auf den Tag, an dem die Webprogrammierung endlich eine gründliche Frühjahrsputz erhält, all diese seltsamen kleinen Eigenheiten beseitigt werden und jeder nach den gleichen Regeln spielt.

Vielleicht am Tag nachdem mein Roboterdiener mich auf rückständige Löhne verklagt.

Answer 3

// http://javascript.crockford.com/memory/leak.html
// reinigt das DOM-Element, um Speicherlecks zu vermeiden
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);
}

Answer 4

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 zu EObj=document.getElementById(EId).

Das ist EIN Gleichheitszeichen und nicht ==.

Wenn das Element EId existiert, wird es entfernt, ansonsten gibt die Funktion false zurück und nicht error.