วิธีการ removeChild() ของ HTML DOM Element

คำนิยามและวิธีใช้

removeChild() วิธีการลบโครงข่ายลูกของตัวเลือก.

วิธีการนี้ส่งผลกลับโครงข่ายของตัวเลือก; หากตัวเลือกไม่มีอยู่ ก็ส่งผลกลับ 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(node)

หรือ

node.removeChild(node)

ตัวแปร

ตัวแปร รายละเอียด
node จำเป็น ต้องลบฝายย่อย (องค์ประกอบ)

ค่าที่กลับมา

ประเภท รายละเอียด
Node

โครงสร้างที่ถูกลบ (องค์ประกอบ)

ถ้าไม่มีฝายย่อย จะเป็น null

การสนับสนุนโปรแกรมบราวเซอร์

element.removeChild() เป็นคุณสมบัติของ DOM Level 1 (1998)

ทุกเบราเซอร์เกิดการสนับสนุนเต็มที่:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน