Việc xóa một lớp khỏi phần tử HTML thật đơn giản với remove() của thuộc tính JavaScript classList phương pháp. Nếu bạn đã đọc Cách thêm lớp vào một phần tử rồi thì bạn sẽ nhận ra rằng việc xóa lớp cũng giống như cách, chỉ ngược lại.
Trước tiên, hãy xem xét công thức classList.remove () chung - và sau đó theo dõi một ví dụ thực tế.
Công thức
var element = document.querySelector("selector")
element.classList.remove("class")Trong ví dụ chung ở trên, chúng tôi tìm thấy phần tử HTML đầu tiên trên trang có tên bộ chọn được chỉ định (nó có thể là một bộ chọn phần tử, bộ chọn lớp, v.v.) và lưu trữ một tham chiếu đến nó bằng một biến.
Sau đó, chúng tôi đính kèm thuộc tính classList’s remove() phương thức tới đối tượng phần tử (biến) và chỉ định lớp chúng ta muốn xóa khỏi nó.
Ví dụ về Practical classList.remove ()
Để tìm và xóa một lớp, rõ ràng chúng ta cần tìm một phần tử có một lớp.
Vậy chúng ta nên loại bỏ lớp nào?
Để giúp cuộc sống của chúng ta dễ dàng hơn, tôi vừa thêm một lớp có tên là italic đến đoạn văn bạn đang đọc. Như bạn có thể thấy, nó làm cho văn bản được in nghiêng.
Hãy “bỏ in nghiêng” đoạn trên bằng kỹ thuật classList.remove mới tìm thấy của chúng tôi:
var firstParagraph = document.querySelector(".italic")
firstParagraph.classList.remove("italic")Và kết quả:
Lưu ý:Tôi có italic trong biểu định kiểu CSS của trang web của tôi, đó là lý do tại sao nó hoạt động. Lớp trông như thế này:
.italic {
font-style: italic;
}Tài nguyên
- MDN Web Docs element.classList