Metoda removeChild() obiektu HTML DOM Element

Definicja i użycie

removeChild() Metoda usuwa podwęzły elementu.

Metoda zwraca obiekt Node usunięty; jeśli węzeł nie istnieje, zwraca null.

Wskazówka

Podwęzły są usuwane z dokumentu obiektowego (DOM).

Ale można zmodyfikować zwrócony węzeł i wstawić go z powrotem do DOM (patrz poniższy przykład).

Patrz również:

Metoda remove()

Metoda appendChild()

Metoda insertBefore()

Metoda replaceChild()

Atrybut childNodes

Atrybut firstChild

Atrybut lastChild

Atrybut firstElementChild

Atrybut lastElementChild

Przykład

Przykład 1

Usunięcie pierwszego elementu z listy:

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

Przed usunięciem:

  • Kawa
  • Herbata
  • Mleko

Po usunięciu:

  • Herbata
  • Mleko

Spróbuj sam

Przykład 2

Jeśli lista ma podwęzły, usunięcie pierwszego (indeks 0):

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

Spróbuj sam

Przykład 3

Usunięcie wszystkich podwęzłów z listy:

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

Spróbuj sam

Przykład 4

Usunięcie elementu z jego węzła nadrzędnego:

element.parentNode.removeChild(element);

Spróbuj sam

Przykład 5

Usunięcie elementu z jego elementu nadrzędnego i ponowne wstawienie:

const element = document.getElementById("myLI");
function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

Spróbuj sam

Przykład 6: Wskazówka

Proszę użyć appendChild() lub insertBefore() do wstawienia usuniętego węzła do tego samego dokumentu.

Można użyć document.adoptNode() lub document.importNode() do wstawienia go do innego dokumentu.

Poniższy przykład usuwa element z jego elementu nadrzędnego i wstawia go do innego dokumentu:

const child = document.getElementById("mySpan");
function remove() {
  child.parentNode.removeChild(child);
}
function insert() {
  const frame = document.getElementsByTagName("IFRAME")[0]
  const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
  const x = document.adoptNode(child);
  h.appendChild(x);
}

Spróbuj sam

Gramatyka

element.removeChild(node)

lub

node.removeChild(node)

Parametr

Parametr Opis
node Wymagane. Węzeł (element) do usunięcia.

Zwrócona wartość

Typ Opis
Węzeł

Usunięty węzeł (element).

Jeśli nie istnieje podobiekt, to null.

Wspierane przeglądarki

element.removeChild() Jest to cecha DOM Level 1 (1998).

Wszystkie przeglądarki wspierają je w pełni:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wspierane 9-11 Wspierane Wspierane Wspierane Wspierane