Phương thức removeChild() trong JavaScript

• Bùi Tấn Lực
• 908
• 14/09/2025

Chức năng của Phương thức removeChild() trong JavaScript

Phương thức removeChild() trong JavaScript dùng để xóa nút con HTML của một nút cha thông qua vị trí, id hoặc xóa tất cả các phần tử HTML con của một nút cha.

Cú pháp của Phương thức removeChild() trong JavaScript

tenbiencha.removeChild(phantunut);

tenbiencha: Tên biến cha là phần tử HTML chứa các phần tử con cần xóa, thường dùng document.getElementById("giá trị id") để lấy.

phantunut: Phần tử con hoặc nút con cần xóa.

Code Phương thức removeChild() trong JavaScript

Phương thức removeChild() từng vị trí trong JavaScript

Chỉ định được vị trí của phần tử con cần xóa:

document.getElementById("ulid").removeChild(ulid.children[0]); 

<ul id="ulid">
    <li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút XÓA PHẦN TỬ CON để xóa phần tử con đầu tiên, 0 là vị trí đầu tiên, sau khi xóa phần tử con đầu tiên thì phần tử con gần nhất sẽ là phần tử con đầu tiên, bạn có thể chỉ định 1, 2 để xóa phần tử con ở vị trí 1 hoặc 2. </p>
<button onclick="xoaPhanTuCon()">XÓA PHẦN TỬ CON</button>
<script>
function xoaPhanTuCon() {
const ulid = document.getElementById("ulid");
ulid.removeChild(ulid.children[0]); 
}
</script>

Chạy Thử

Phương thức removeChild() id trong JavaScript

Xóa phần tử con có id được chỉ định:

<ul id="ulid">
    <li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li id="lihosting">Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút XÓA PHẦN TỬ CON ID để xóa phần tử con có id đó</p>
<button onclick="xoaPhanTuConId()">XÓA PHẦN TỬ CON ID</button>
<script>
function xoaPhanTuConId() {
const lihosting = document.getElementById("lihosting");
lihosting.parentNode.removeChild(lihosting); 
}
</script>

Chạy Thử

Phương thức removeChild() xóa tất cả trong JavaScript

Xóa tất cả các nút con của nút cha:

<ul id="ulid">
    <li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút XÓA TẤT CẢ để xóa tất cả phần tử con của ul có id ulid</p>
<button onclick="xoaTatCa()">XÓA TẤT CẢ</button>
<script>
function xoaTatCa() {
const ulid = document.getElementById("ulid");
while (ulid.hasChildNodes()) {
    ulid.removeChild(ulid.firstChild);
  }
}
</script>

Chạy Thử

Ứng Dụng removeChild() Trong Xử Lý DOM Thực Tế

removeChild() phát huy tác dụng rõ nhất khi website cần thay đổi nội dung trang theo thao tác của người dùng. Thay vì chỉ xóa một phần tử cố định, JavaScript có thể xác định đúng phần tử cần loại bỏ dựa trên sự kiện hoặc một điều kiện cụ thể.

Xóa Phần Tử Theo Tương Tác Người Dùng

Một tình huống phổ biến là cho phép người dùng tự xóa một mục khỏi giao diện, chẳng hạn như thông báo, sản phẩm trong danh sách hoặc một dòng dữ liệu. Khi đó, sự kiện được gắn cho nút thao tác và removeChild() sẽ loại bỏ phần tử tương ứng khỏi DOM.

Điểm quan trọng là phải xác định đúng phần tử cha trước khi gọi phương thức. Phần tử cần xóa được truyền vào removeChild(), giúp JavaScript biết chính xác node nào cần loại khỏi cây DOM.

<ul id="tasks">
  <li>Hoàn thành giao diện <button>Xóa</button></li>
  <li>Kiểm tra website <button>Xóa</button></li>
</ul>

<script>
const tasks = document.getElementById("tasks");

tasks.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const item = event.target.parentElement;
    tasks.removeChild(item);
  }
});
</script>

Cách làm này đặc biệt hữu ích với danh sách có nhiều phần tử vì không cần tạo một hàm xóa riêng cho từng mục. Khi người dùng nhấn đúng nút, JavaScript tìm phần tử chứa nút đó rồi loại bỏ nó khỏi danh sách.

Xóa Phần Tử Theo Điều Kiện Trong JavaScript

removeChild() cũng có thể kết hợp với điều kiện để dọn những phần tử không còn phù hợp. JavaScript trước tiên kiểm tra nội dung hoặc thuộc tính của từng node, sau đó chỉ xóa những phần tử đáp ứng yêu cầu.

<ul id="products">
  <li data-status="active">Sản phẩm A</li>
  <li data-status="hidden">Sản phẩm B</li>
  <li data-status="active">Sản phẩm C</li>
</ul>

<script>
const products = document.getElementById("products");

Array.from(products.children).forEach(function(item) {
  if (item.dataset.status === "hidden") {
    products.removeChild(item);
  }
});
</script>

Trong ví dụ này, chỉ các mục có trạng thái hidden bị loại bỏ. Việc chuyển danh sách phần tử con thành một mảng trước khi duyệt cũng giúp thao tác xóa dễ kiểm soát hơn, đặc biệt khi có nhiều node cần xử lý.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức removeChild() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức removeChild() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp