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

• Bùi Tấn Lực
• 916
• 16/09/2025

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

Phương thức classList remove() trong JavaScript dùng để xóa một hoặc nhiều giá trị trong thuộc tính class trên phần tử HTML, phương thức này chỉ xóa giá trị chứ không xóa thuộc tính class.

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

Xóa 1 giá trị

tenbien.classList.remove("giatri");

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

giatri: Giá trị của thuộc tính class.

Xóa nhiều giá trị

tenbien.classList.remove("giatri1", "giatri2",.....);

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

giatri1, giatri2,....: Nhiều giá trị của thuộc tính class.

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

Phương thức classList remove() một giá trị trong JavaScript

document.getElementById("pid").classList.remove("pclass");

<p id="pid" class="pclass" >Nội dung đã css</p>
<p>Click vào nút XÓA CLASS để xóa class pclass của phần tử HTML có id pid</p>
<button onclick="xoaClass()">XÓA CLASS</button>
<script>
function xoaClass() {
  // Lấy id pid và thực hiện hành động xóa class pclass
  document.getElementById("pid").classList.remove("pclass");
}
</script>

Chạy Thử

Phương thức classList remove() nhiều giá trị trong JavaScript

document.getElementById("pid").classList.remove("pclass","pclassbg","pclassc");

<p id="pid" class="pclass pclassbg pclassc" >Nội dung đã css</p>
<p>Click vào nút XÓA CLASS để xóa nhiều giá trị của class trên phần tử HTML có id pid</p>
<button onclick="xoaClass()">XÓA CLASS</button>
<script>
function xoaClass() {
  // Lấy id pid và thực hiện hành động xóa nhiều giá trị của class
  document.getElementById("pid").classList.remove("pclass","pclassbg","pclassc");
}
</script>

Chạy Thử

Những lưu ý khi sử dụng classList remove() trong JavaScript

Xóa class không tồn tại có gây lỗi không?

Khi gọi classList.remove() với một class chưa được gắn cho phần tử, JavaScript không phát sinh lỗi. Phương thức chỉ bỏ qua class đó và tiếp tục thực hiện các thao tác tiếp theo.

Điều này giúp bạn có thể gọi remove() mà không cần kiểm tra trước phần tử đang có class hay chưa. Cách viết này đặc biệt hữu ích khi trạng thái giao diện thay đổi liên tục, chẳng hạn thêm hoặc loại bỏ class để hiển thị, ẩn hoặc cập nhật một thành phần.

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

box.classList.remove("active");

Nếu active không tồn tại trong danh sách class của box, đoạn mã trên vẫn chạy bình thường. Tuy nhiên, cần bảo đảm biến phần tử thực sự tồn tại trước khi truy cập classList; nếu không, lỗi có thể phát sinh từ chính phần tử null, không phải từ remove().

Có thể xóa nhiều class cùng lúc bằng remove() không?

classList.remove() cho phép truyền nhiều tên class trong cùng một lần gọi. Đây là cách gọn hơn so với việc gọi phương thức nhiều lần khi cần đưa phần tử về một trạng thái mới.

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

button.classList.remove("active", "loading", "disabled");

Trong ví dụ trên, cả ba class đều được loại bỏ khỏi phần tử nếu chúng đang tồn tại. Nếu một hoặc nhiều class không có sẵn, các class còn lại vẫn được xử lý bình thường.

Khi danh sách class cần xóa cố định, cách viết này giúp mã JavaScript ngắn gọn và dễ kiểm soát hơn.

Những lỗi thường gặp khi dùng classList.remove()

• Gọi trên phần tử không tồn tại: Nếu querySelector() không tìm thấy phần tử, kết quả có thể là null và việc truy cập classList sẽ gây lỗi.
• Nhầm tên class: Tên được truyền vào remove() phải khớp với class cần xóa. Chỉ một ký tự khác biệt cũng khiến class không được loại bỏ.
• Đưa dấu chấm vào tên class: Khi sử dụng remove(), chỉ truyền tên class như active, không viết .active như khi dùng bộ chọn CSS.
• Xóa class không đúng thời điểm: Trong các giao diện tương tác, cần gọi phương thức sau khi phần tử đã được tạo và khi trạng thái cần thay đổi thực sự xảy ra.

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

menu.classList.remove(".open");

Đoạn mã trên không xóa class open vì giá trị truyền vào có dấu chấm. Cách đúng là truyền trực tiếp tên class cần loại bỏ.

menu.classList.remove("open");

Lời kết

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