HTML DOM removeChild() Method
ตัวอย่าง
ลบ <li> องค์ประกอบแรกออกจากรายการ:
var list = document.getElementById("myList"); // Get the <ul> element with id="myList"
list.removeChild(list.childNodes[0]); // Remove <ul>'s first child node (index 0)
ก่อนลบ:
- กาแฟ
- ชา
- น้ำนม
หลังจากลบ:
- ชา
- น้ำนม
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
removeChild() วิธีการลบโหนดย่อยที่ระบุขององค์ประกอบที่ระบุ
ส่งคืนโหนดที่ถูกลบเป็นอ็อบเจ็กต์โหนด หรือnullหากโหนดนั้นไม่มีอยู่
หมายเหตุ:โหนดย่อยที่ถูกลบไม่ได้เป็นส่วนหนึ่งของ DOM อีกต่อไป อย่างไรก็ตาม ด้วยการอ้างอิงที่ส่งคืนโดยวิธีนี้ เป็นไปได้ที่จะแทรกรายการย่อยที่ถูกลบไปยังองค์ประกอบในภายหลัง (ดู "ตัวอย่างเพิ่มเติม")
เคล็ดลับ:ใช้วิธีappendChild()หรือ insertBefore()เพื่อแทรกโหนดที่ถูกลบออกในเอกสารเดียวกัน หากต้องการแทรกลงในเอกสารอื่น ให้ใช้เมธอดdocument.adoptNode()หรือ document.importNode()
รองรับเบราว์เซอร์
Method | |||||
---|---|---|---|---|---|
removeChild() | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
node.removeChild(node)
ค่าพารามิเตอร์
Parameter | Type | Description |
---|---|---|
node | Node object | Required. The node object you want to remove |
รายละเอียดทางเทคนิค
คืนมูลค่า: | โหนดอ็อบเจ็กต์ แทนโหนดที่ถูกลบออก หรือnullถ้าโหนดนั้นไม่มีอยู่ |
---|---|
เวอร์ชัน DOM | วัตถุโหนดหลักระดับ 1 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ค้นหาว่ารายการมีโหนดย่อยหรือไม่ หากเป็นเช่นนั้น ให้ลบโหนดชายน์แรก (ดัชนี 0):
// Get the <ul> element with id="myList"
var list = document.getElementById("myList");
// If the <ul> element has any child nodes, remove its first child node
if (list.hasChildNodes()) {
list.removeChild(list.childNodes[0]);
}
ก่อนลบ:
- Coffee
- Tea
- Milk
หลังจากลบ:
- Tea
- Milk
ตัวอย่าง
ลบโหนดย่อยทั้งหมดของรายการ:
// Get the <ul> element with id="myList"
var list = document.getElementById("myList");
// As long as <ul> has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
ก่อนลบ:
- Coffee
- Tea
- Milk
หลังจากลบ:
ตัวอย่าง
ลบ <li> องค์ประกอบที่มี id="myLI" ออกจากองค์ประกอบหลัก (โดยไม่ระบุโหนดหลัก):
var item = document.getElementById("myLI");
item.parentNode.removeChild(item);
ก่อนลบ:
- Coffee
- Tea
- Milk
หลังจากลบ:
- Coffee
- Milk
ตัวอย่าง
ลบ <li> องค์ประกอบจากพาเรนต์และแทรกอีกครั้ง:
var item = document.getElementById("myLI");
function removeLi() {
item.parentNode.removeChild(item);
}
function appendLi() {
var list = document.getElementById("myList");
list.appendChild(item);
}
ตัวอย่าง
ลบองค์ประกอบ <span> ออกจากพาเรนต์และแทรกลงในองค์ประกอบ <h1> ในเอกสารอื่น:
var child = document.getElementById("mySpan");
function removeLi() {
child.parentNode.removeChild(child);
}
function myFunction() {
var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(child);
h.appendChild(x);
}