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

• Bùi Tấn Lực
• 972
• 18/09/2025

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

Phương thức remove() trong JavaScript dùng để xóa toàn bộ một phần tử HTML bao gồm tất cả: thẻ, thuộc tính, văn bản.

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

<p id="pid">Click vào nút XÓA để xóa phần tử HTML này</p>
<button onclick="xoa()">XÓA</button>
<script>
function xoa() {
  const phantu = document.getElementById("pid");
  phantu.remove();
}
</script>

Chạy Thử

Cách sử dụng remove() trong JavaScript hiệu quả

Phương thức remove() sẽ xóa trực tiếp một phần tử khỏi DOM. Để sử dụng an toàn và đúng mục đích, bạn nên xác định rõ phần tử cần xóa, thời điểm thực hiện và tránh nhầm với thao tác chỉ thay đổi class.

Xóa phần tử HTML khi người dùng thực hiện hành động

Một trường hợp phổ biến là xóa thông báo, mục trong danh sách hoặc một thành phần giao diện sau khi người dùng nhấn nút. Cách làm này giúp giao diện được cập nhật ngay mà không cần tải lại trang.

<div id="thongBao">
  <p>Đây là thông báo cần đóng.</p>
  <button id="dongThongBao">Đóng</button>
</div>

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

dongThongBao.addEventListener("click", function () {
  thongBao.remove();
});
</script>

Trong ví dụ này, sự kiện click được gắn cho nút. Khi người dùng nhấn nút, phần tử chứa thông báo được loại khỏi DOM. Cách triển khai này phù hợp với các thành phần có hành động đóng hoặc xóa rõ ràng.

Kiểm tra phần tử trước khi gọi remove()

Nếu phần tử được tìm bằng getElementById(), querySelector() hoặc một phương thức tương tự nhưng không tìm thấy kết quả, giá trị nhận được có thể là null. Vì vậy, khi phần tử không chắc chắn tồn tại, nên kiểm tra trước khi gọi remove().

const phanTu = document.querySelector(".thong-bao");

if (phanTu) {
  phanTu.remove();
}

Cách kiểm tra này đặc biệt hữu ích khi mã JavaScript được dùng trên nhiều trang có cấu trúc HTML khác nhau. Nó giúp tránh lỗi khi selector không tìm thấy phần tử cần thao tác.

Phân biệt remove() với classList.remove()

remove() và classList.remove() có tên gần giống nhau nhưng tác dụng hoàn toàn khác. Phương thức remove() xóa cả phần tử khỏi DOM, trong khi classList.remove() chỉ loại bỏ một class khỏi phần tử và giữ nguyên phần tử đó.

const hop = document.querySelector(".hop");

// Xóa toàn bộ phần tử
hop.remove();

// Chỉ xóa class "an"
hop.classList.remove("an");

Do đó, nếu mục tiêu là loại bỏ một thành phần khỏi giao diện, hãy dùng remove(). Nếu chỉ muốn thay đổi trạng thái hiển thị hoặc thuộc tính CSS thông qua class, classList.remove() mới là lựa chọn phù hợp.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức remove() 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 remove() 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