Cách xóa class khỏi phần tử với Vanilla JavaScript

Việc xóa class khỏi phần tử HTML rất đơn giản với phương thức remove() của thuộc tính classList trong JavaScript. Nếu bạn đã đọc "Cách thêm class cho phần tử", bạn sẽ nhận ra xóa class cũng giống hệt thêm class, chỉ ngược lại thôi.

Hãy xem công thức chung của classList.remove() trước — rồi làm ví dụ thực tế.

Công thức chung

var element = document.querySelector("selector") element.classList.remove("class")

Trong ví dụ chung trên, chúng ta tìm phần tử HTML đầu tiên trên trang có tên selector chỉ định (có thể là selector phần tử, selector class, v.v.) và lưu tham chiếu đến nó bằng một biến.

Sau đó, chúng ta gắn phương thức remove() của thuộc tính classList vào đối tượng phần tử (biến) và chỉ định class muốn xóa.

Ví dụ thực tế classList.remove()

Để tìm và xóa một class, chúng ta rõ ràng cần một phần tử có class đó.

Chúng ta nên xóa class nào?

Để dễ dàng hơn, tôi vừa thêm class italic vào đoạn văn bạn đang đọc. Như bạn thấy, nó làm chữ in nghiêng.

Hãy "bỏ in nghiêng" đoạn văn trên với kỹ thuật classList.remove mới học:

var firstParagraph = document.querySelector(".italic") firstParagraph.classList.remove("italic")

Kết quả:

Lưu ý: Tôi có class italic trong file CSS của trang web, nên nó mới hoạt động. Class trông như sau:

.italic { font-style: italic; }

Tài nguyên

• MDN Web Docs element.classList