ลบ Child Node ของ Element เฉพาะใน JavaScript

เพื่อ ลบ (Remove) Child Node ของ List JavaScript มีเมธอด removeChild() ใช้เมธอดนี้ลบ List Item ใดๆ ได้ด้วย Index Position มาดูรายละเอียดกัน

Syntax

node.removeChild(node);

ตัวอย่างที่ 1

ในตัวอย่างนี้ มี 3 Elements ใน List แต่หลังลบ Child เหลือ 2 Elements แสดงใน Output

<html> <body> <ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul> <script> var list = document.getElementById("list"); list.removeChild(list.childNodes[1]); </script> </body> </html>

ผลลัพธ์

Tesla Solarcity

ตัวอย่างที่ 2

ในตัวอย่างนี้ มี 3 Elements ใน List แต่หลังลบ First Child ด้วย removeChild() เหลือ 2 Elements แสดงใน Output

<html> <body> <ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul> <script> var list = document.getElementById("list"); list.removeChild(list.childNodes[0]); </script> </body> </html>

ผลลัพธ์

Spacex Solarcity