Bạn có thể xóa các kiểu đã thêm bằng cả JavaScript và jQuery. Tuy nhiên, trong hướng dẫn này, chúng tôi đề xuất các phương thức jQuery yêu cầu ít mã hơn
Hãy thảo luận về tình huống sau
if (color != 'ffffff') $("body").css("background-color", color); else // remove style ?
Bây giờ hãy loại bỏ kiểu dáng. Một chuỗi trống sẽ xóa thuộc tính màu CSS
.css("background-color", "");
Đừng làm css("background-color", "none") vì nó sẽ xóa kiểu dáng mặc định khỏi các tệp css
Có một cách khác để loại bỏ phong cách. Chỉ cần sử dụng phương thức jQuery removeAttr()
Thí dụTitle of the Document Red text Remove
Hãy cẩn thận vì phương pháp sau loại bỏ tất cả các thuộc tính khác trong thuộc tính style
Các. css() Phương thức jQuery được sử dụng để đặt hoặc trả về một hoặc nhiều thuộc tính kiểu cho các phần tử được chọn
Các. Phương thức jQuery removeAttr() loại bỏ một thuộc tính khỏi mỗi phần tử trong tập hợp các phần tử phù hợp. Phương thức này sử dụng hàm removeAttribute() của JavaScript, nhưng nó có khả năng được gọi trực tiếp trên một đối tượng jQuery
Tương tự như .empty(), phương thức .remove() lấy các phần tử ra khỏi DOM. Sử dụng .remove() khi bạn muốn xóa chính phần tử đó, cũng như mọi thứ bên trong nó. Ngoài bản thân các phần tử, tất cả các sự kiện ràng buộc và dữ liệu jQuery được liên kết với các phần tử đều bị xóa. Để xóa các phần tử mà không xóa dữ liệu và sự kiện, hãy sử dụng
$( ".hello" ).remove();
0 thay thếHãy xem xét HTML sau
1
2
3
4
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
Chúng tôi có thể nhắm mục tiêu bất kỳ yếu tố nào để loại bỏ
1
$( ".hello" ).remove();
Điều này sẽ dẫn đến cấu trúc DOM với phần tử
$( ".hello" ).remove();
1 bị xóa1
2
3
<div class="container">
<div class="goodbye">Goodbye</div>
</div>
Nếu chúng ta có bất kỳ số lượng phần tử lồng nhau nào bên trong
$( ".hello" ).remove();
2, thì chúng cũng sẽ bị xóa. Các cấu trúc jQuery khác như dữ liệu hoặc trình xử lý sự kiện cũng bị xóaChúng tôi cũng có thể bao gồm một bộ chọn làm tham số tùy chọn. Ví dụ: chúng ta có thể viết lại mã xóa DOM trước đó như sau
jQuery cung cấp một số phương thức, chẳng hạn như addClass(), removeClass(), toggleClass(), v.v. để thao tác các lớp CSS được gán cho các phần tử HTML
jQuery addClass() Phương thức
Phương thức addClass() của jQuery thêm một hoặc nhiều lớp vào các phần tử được chọn
Ví dụ sau sẽ thêm lớp jQuery addClass() Demo Hello World
The quick brown fox jumps over the lazy dog.
Add Class 0 vàovà lớp jQuery addClass() Demo Hello WorldThe quick brown fox jumps over the lazy dog.
Add Class 1 đếncác phần tử có lớp jQuery addClass() Demo Hello World
The quick brown fox jumps over the lazy dog.
Add Class 2 khi nhấp vào nútjQuery addClass() Demo Demo Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Tip: Lorem Ipsum is dummy text.
Add ClassBạn cũng có thể thêm nhiều lớp vào các phần tử cùng một lúc. Chỉ cần chỉ định danh sách các lớp được phân tách bằng dấu cách trong phương thức addClass(), như thế này
jQuery addClass() Demo Hello World
The quick brown fox jumps over the lazy dog.
Add ClassjQuery removeClass() Phương thức
Tương tự, bạn có thể loại bỏ các lớp khỏi các phần tử bằng cách sử dụng phương thức removeClass() của jQuery. Phương thức removeClass() có thể xóa một lớp, nhiều lớp hoặc tất cả các lớp cùng một lúc khỏi các phần tử được chọn
Ví dụ sau sẽ loại bỏ lớp jQuery addClass() Demo Hello World
The quick brown fox jumps over the lazy dog.
Add Class 0 khỏivà lớp jQuery addClass() Demo Hello WorldThe quick brown fox jumps over the lazy dog.
Add Class 2 và jQuery addClass() Demo Hello WorldThe quick brown fox jumps over the lazy dog.
Add Class 1 từcác yếu tố trên nút bấm
jQuery removeClass() Demo Demo Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Tip: Lorem Ipsum is dummy text.
Remove ClassKhi phương thức removeClass() được gọi mà không có đối số, nó sẽ xóa tất cả các lớp khỏi các phần tử được chọn. Đây là một ví dụ
jQuery removeClass() Demo Demo Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Tip: Lorem Ipsum is dummy text.
Remove ClassjQuery toggleClass() Phương thức
jQuery toggleClass() thêm hoặc xóa một hoặc nhiều lớp khỏi các phần tử được chọn sao cho nếu phần tử được chọn đã có lớp đó thì nó sẽ bị xóa; . e. chuyển đổi lớp học