Xóa child node của element cụ thể trong JavaScript

Để xóa child node của list, JavaScript cung cấp removeChild(). Dùng index position để xóa item bất kỳ.

Cú pháp

parentNode.removeChild(childNode);

Ví dụ 1: Xóa child thứ 2 (index 1)

<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>

Kết quả

Tesla Solarcity

Ví dụ 2: Xóa child đầu tiên (index 0)

<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>

Kết quả

Spacex Solarcity

Lưu ý quan trọng: childNodes bao gồm text node (khoảng trắng, xuống dòng). Nên dùng children (chỉ element node) hoặc firstElementChild/lastElementChild. Ví dụ: list.removeChild(list.children[0]) an toàn hơn.