طريقة removeChild() لـ HTML DOM Element

التعريف والاستخدام

removeChild() يتم حذف العناصر الفرعية للعنصر.

يعود هذا الطريقة بمثابة Node object للعنصر المزيل؛ إذا لم يكن العنصر موجودًا، يعود null.

نصائح

العناصر الفرعية يتم إزالتها من بنية الوثيقة (DOM).

لكن يمكن تعديل العنصر المعدل وإعادة إدراجه إلى DOM (انظر المثال أدناه).

يرجى الرجوع إلى:

مетод remove()

مетод appendChild()

مетод insertBefore()

مетод replaceChild()

خصائص childNodes

خصائص firstChild

خصائص lastChild

خصائص firstElementChild

خصائص lastElementChild

مثال

مثال 1

إزالة العنصر الأول من القائمة:

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

قبل الحذف:

  • القهوة
  • الشاي
  • اللبن

بعد الحذف:

  • الشاي
  • اللبن

جرب بنفسك

مثال 2

إذا كان لديه عناصر فرعية في القائمة، قم بإزالة الأول (الواقع 0):

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

جرب بنفسك

مثال 3

إزالة جميع العناصر الفرعية من القائمة:

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

جرب بنفسك

مثال 4

من إزالة عنصر من العنصر الأم:

element.parentNode.removeChild(element);

جرب بنفسك

مثال 5

من إزالة عنصر من عنصر الأب وإعادة إدراجه:

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

جرب بنفسك

مثال 6: رسالة تنبيه

يرجى استخدام appendChild() أو insertBefore() لإدراج العنصر المزيل في نفس الوثيقة.

يمكن استخدامه document.adoptNode() أو document.importNode() لإدراجه في وثيقة أخرى.

في المثال التالي، يتم حذف عنصر من عنصر الأب وإدراجه في وثيقة أخرى:

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

جرب بنفسك

النص

element.removeChild(النود)

أو

النود.removeChild(النود)

المعامل

المعامل الوصف
النود مطلوب. العنصر (النود) الذي يجب حذفه.

القيمة التي تعود

النوع الوصف
Node

العنصر (النود) المزيل.

إذا لم يكن العنصر الفرعي موجودًا، فإنه null.

دعم المتصفح

element.removeChild() هو خاصية DOM Level 1 (1998).

جميع المتصفحات يدعمونه بشكل كامل:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم 9-11 الدعم الدعم الدعم الدعم