Usuń element według identyfikatora

Podczas usuwania elementu ze standardowym JavaScript należy najpierw przejść do jego elementu nadrzędnego:

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

Konieczność przejścia do węzła nadrzędnego wydaje mi się nieco dziwna, czy istnieje powód, dla którego JavaScript działa w ten sposób?

Wiem, że rozszerzanie natywnych funkcji DOM nie zawsze jest najlepszym lub najpopularniejszym rozwiązaniem, ale działa dobrze w nowoczesnych przeglądarkach.

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

Następnie możesz usunąć takie elementy

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

lub

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

Uwaga: to rozwiązanie nie działa dla IE 7 i niższych. Aby uzyskać więcej informacji o rozszerzaniu DOM, przeczytaj ten artykuł .

EDYCJA : Przeglądając moją odpowiedź w 2019 r. node.remove()Przyszedł mi na ratunek i może być używany w następujący sposób (bez powyższego wypełnienia):

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

lub

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

Te funkcje są dostępne we wszystkich nowoczesnych przeglądarkach (nie IE). Czytaj więcej na MDN .

Crossbrowser i IE> = 11:

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

Możesz stworzyć removefunkcję, abyś nie musiał za każdym razem o niej myśleć:

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

To właśnie obsługuje DOM . Wyszukaj na tej stronie „usuń” lub „usuń”, a removeChild jest jedyną, która usuwa węzeł.

DOM jest zorganizowany w drzewie węzłów, gdzie każdy węzeł ma wartość, wraz z listą odniesień do jego węzłów potomnych. element.parentNode.removeChild(element)Naśladuje więc dokładnie to, co dzieje się wewnętrznie: Najpierw przejdź do węzła nadrzędnego, a następnie usuń odwołanie do węzła podrzędnego.

Począwszy od DOM4, funkcja pomocnika jest zrobić to samo: element.remove(). To działa w 87% przeglądarek (stan na rok 2016), ale nie IE 11. Jeśli trzeba wspierać starszych przeglądarek, możesz:

• Usuń elementy za pośrednictwem węzła nadrzędnego, jak w pytaniu ,
• zmodyfikować natywne funkcje DOM, jak w odpowiedzi Johana Dettmara , lub
• użyj wypełnienia DOM4 .

Aby usunąć jeden element:

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

Aby usunąć wszystkie elementy, na przykład o określonej nazwie klasy:

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

możesz po prostu użyć element.remove()

ChildNode.remove()Metoda usuwa obiekt z drzewa, do której należy.

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

Oto skrzypce, które pokazują, jak możesz zadzwonić document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Nie ma potrzeby rozszerzania NodeList. Zostało już wdrożone.

**

Możesz bezpośrednio usunąć ten element za pomocą remove()metody DOM.

oto przykład:

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

Według poziomu Dom 4 specyfikacji, która jest obecna wersja w rozwoju, istnieją pewne nowe metody poręczny mutacji dostępny: append(), prepend(), before(), after(), replace(), i remove().

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

Konieczność przejścia do węzła nadrzędnego wydaje mi się nieco dziwna, czy istnieje powód, dla którego JavaScript działa w ten sposób?

Nazwa funkcji to removeChild()i jak można usunąć dziecko, gdy nie ma rodzica? :)

Z drugiej strony nie zawsze trzeba nazywać to tak, jak pokazano. element.parentNodejest tylko pomocnikiem, aby uzyskać węzeł nadrzędny danego węzła. Jeśli znasz już węzeł nadrzędny, możesz go po prostu użyć w następujący sposób:

Dawny:

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

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

Aby dodać coś więcej:

Niektóre odpowiedzi wskazują, że zamiast używać parentNode.removeChild(child);, możesz użyć elem.remove();. Ale, jak zauważyłem, istnieje różnica między tymi dwiema funkcjami i nie jest o nich mowa w tych odpowiedziach.

Jeśli użyjesz removeChild(), zwróci odwołanie do usuniętego węzła.

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

Ale jeśli użyjesz elem.remove();, nie zwróci ci referencji.

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

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

Takie zachowanie można zaobserwować w Chrome i FF. Myślę, że warto to zauważyć :)

Mam nadzieję, że moja odpowiedź dodaje pewnej wartości do pytania i będzie pomocna !!

Funkcje korzystające z ele.parentNode.removeChild (ele) nie będą działać w przypadku elementów utworzonych, ale jeszcze nie wstawionych do kodu HTML. Biblioteki takie jak jQuery i Prototype mądrze używają metody podobnej do poniższej, aby ominąć to ograniczenie.

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

Myślę, że JavaScript działa w ten sposób, ponieważ oryginalni projektanci DOM utrzymywali nawigację nadrzędną / podrzędną oraz poprzednią / następną nawigację jako wyższy priorytet niż tak popularne dziś modyfikacje DHTML. Możliwość czytania z jednego <input type = 'text'> i pisania do drugiego według względnej lokalizacji w DOM była przydatna w połowie lat 90., kiedy dynamiczne generowanie całych formularzy HTML lub interaktywnych elementów GUI było zaledwie migotaniem oko jakiegoś dewelopera.

Konieczność przejścia do węzła nadrzędnego wydaje mi się nieco dziwna, czy istnieje powód, dla którego JavaScript działa w ten sposób?

IMHO: Powód tego jest taki sam, jak widziałem w innych środowiskach: wykonujesz akcję na podstawie swojego „linku” do czegoś. Nie możesz go usunąć, gdy jesteś z nim połączony.

Jak ścinanie gałęzi drzewa. Podczas cięcia usiądź na boku najbliżej drzewa, w przeciwnym razie wynik będzie ... niefortunny (choć zabawny).

Ten faktycznie pochodzi z FireFox ... tym razem IE wyprzedził paczkę i pozwolił na usunięcie elementu bezpośrednio.

To tylko moje założenie, ale uważam, że powodem, dla którego musisz usunąć dziecko za pośrednictwem rodzica, jest problem ze sposobem, w jaki FireFox obsługiwał referencję.

Jeśli wywołujesz obiekt, aby bezpośrednio popełnić hari-kari, to zaraz po jego śmierci nadal masz do niego odniesienie. Może to spowodować kilka paskudnych błędów ... takich jak nieusunięcie go, usunięcie go, ale zachowanie referencji, które wydają się prawidłowe, lub po prostu wyciek pamięci.

Wierzę, że kiedy zdali sobie sprawę z tego problemu, obejście polegało na usunięciu elementu przez jego element nadrzędny, ponieważ gdy element zniknie, teraz po prostu trzymasz odniesienie do elementu nadrzędnego. To powstrzymałoby całą tę nieprzyjemność i (na przykład, zamykając węzeł drzewa po węźle) całkiem ładnie się „spakowało”.

Powinien to być łatwy do naprawienia błąd, ale podobnie jak w przypadku wielu innych rzeczy w programowaniu internetowym, wydanie prawdopodobnie zostało przyspieszone, co doprowadziło do tego ... a zanim pojawiła się kolejna wersja, wystarczająca liczba osób korzystała z niego, że zmiana tego doprowadziłaby do złamania kawałka kodu.

Znowu wszystko to jest po prostu zgadywaniem.

Z niecierpliwością czekam jednak na dzień, w którym programowanie sieciowe zostanie w końcu całkowicie wyczyszczone na wiosnę, wszystkie te dziwne małe dziwactwa zostaną oczyszczone i wszyscy zaczną grać na tych samych zasadach.

Prawdopodobnie dzień po tym, jak mój robot-robot pozwał mnie o zaległe płace.

Z tego, co rozumiem, usunięcie węzła bezpośrednio nie działa w Firefoksie, tylko Internet Explorer. Tak więc, aby wesprzeć Firefoksa, musisz iść do rodzica, aby usunąć jego dziecko.

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

To najlepsza funkcja do usuwania elementu bez błędu skryptu:

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

Uwaga do EObj=document.getElementById(EId).

To JEDEN znak równości nie ==.

jeśli element EIdistnieje, funkcja go usuwa, w przeciwnym razie zwraca false, a nie error.