removeChild() là một phương thức JavaScript dùng để xóa một phần tử con khỏi một phần tử cha trong HTML DOM (Document Object Model).
Ví dụ:
Giả sử bạn có một danh sách gồm các mục “Cà phê”, “Trà”, “Sữa”:
<!DOCTYPE html>
<html>
<body>
<h1>The Element Object</h1>
<h2>The removeChild() Method</h2>
<p>Click "Remove" to remove the first item from the list:</p>
<button onclick="myFunction()">Remove</button>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<script>
function myFunction() {
const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);
}
</script>
</body>
</html>
Bạn có thể sử dụng removeChild() để xóa phần tử “Cà phê” khỏi danh sách:
const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);
Sau khi thực thi đoạn code này, danh sách sẽ chỉ còn lại hai mục “Trà” và “Sữa”:
<ul id="myList">
<li>Trà</li>
<li>Sữa</li>
</ul>
Xem ảnh động.
Những điều cần lưu ý:
- removeChild() xóa một phần tử con khỏi DOM. Điều này không ảnh hưởng đến chính phần tử đó. Bạn có thể lưu trữ phần tử đã xóa và sử dụng nó sau này.
- Phần tử con được xóa sẽ không còn thuộc về phần tử cha nữa. Nó không còn là con của phần tử cha và cũng không nằm trong danh sách con của phần tử cha.
- Bạn có thể sử dụng các phương thức khác như appendChild() hoặc insertBefore() để thêm lại phần tử đã xóa vào DOM.
Các cách sử dụng removeChild()
- Xóa phần tử đầu tiên của một danh sách:
const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);
- Xóa phần tử cuối cùng của một danh sách:
const list = document.getElementById("myList");
list.removeChild(list.lastElementChild);
- Xóa tất cả phần tử con của một danh sách:
const list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
- Xóa một phần tử khỏi phần tử cha:
const element = document.getElementById("myLI");
element.parentNode.removeChild(element);
Như vậy removeChild() là một phương thức mạnh mẽ cho phép bạn xóa các phần tử con khỏi DOM. Hiểu cách sử dụng removeChild() sẽ giúp bạn thao tác với các phần tử HTML một cách linh hoạt và hiệu quả.
