HTML DOM Element removeChild() Metodu

Tanım ve Kullanım

removeChild() Bu yöntem, elementin alt düğümlerini kaldırır.

Bu yöntem, kaldırılan düğümü Node nesnesi olarak döndürür; düğüm yoksa, döndürür: null.

İpucu

Alt düğümler, belge nesnesi modeli (DOM)'dan çıkarıldı.

Ancak, döndürülen düğümü DOM'a geri ekleyebilirsiniz (aşağıdaki örnek için bkz.).

Daha fazla bilgi için bkz:

remove() metodu

appendChild() metodu

insertBefore() metodu

replaceChild() metodu

childNodes özelliği

firstChild özelliği

lastChild özelliği

firstElementChild özelliği

lastElementChild özelliği

Örnek

Örnek 1

Listeden ilk elementi kaldırın:

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

Silindikten önce:

  • Kahve
  • Çay
  • Süt

Silindikten sonra:

  • Çay
  • Süt

Kişisel Deneyim

Örnek 2

Liste alt düğümleri varsa, ilkini (sıra numarası 0) kaldırın:

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

Kişisel Deneyim

Örnek 3

Listeden tüm alt düğümleri kaldırın:

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

Kişisel Deneyim

Örnek 4

Bir elementi ebeveyn düğümünden çıkarın:

element.parentNode.removeChild(element);

Kişisel Deneyim

Örnek 5

Bir elementi ebeveyn elementinden çıkarın, ardından tekrar ekleyin:

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

Kişisel Deneyim

Örnek 6: İpucu

Silinen düğümü aynı belgeye ekleme için appendChild() veya insertBefore() kullanılmalıdır.

document.adoptNode() veya document.importNode() kullanılarak başka bir belgeye eklenmesi sağlanabilir.

Aşağıdaki örnek, bir elementi ebeveyn elementinden siler ve başka bir belgeye ekler:

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

Kişisel Deneyim

Gramer

element.removeChild(node)

veya

node.removeChild(node)

Parametre

Parametre Tanım
node Gerekli. Silinecek düğüm (element).

Dönüş Değeri

Tür Tanım
Node

Silinen düğüm (element).

Alt element yoksa, null döner.

Tarayıcı Desteği

element.removeChild() Bu, DOM Level 1 (1998) özelliğidir.

Tüm tarayıcılar tamamen destekler:

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