Làm cách nào để xóa CSS bằng jQuery?

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()

  
    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();

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

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();

Chú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

jQuery addClass() Demo





    Hello World
    
The quick brown fox jumps over the lazy dog.
    Add Class

các phần tử có lớp

jQuery addClass() Demo





    Hello World
    
The quick brown fox jumps over the lazy dog.
    Add Class

jQuery addClass() Demo





    Demo Text
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    
Tip: Lorem Ipsum is dummy text.
    Add Class

Bạ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 Class

jQuery 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

jQuery addClass() Demo





    Hello World
    
The quick brown fox jumps over the lazy dog.
    Add Class

jQuery addClass() Demo





    Hello World
    
The quick brown fox jumps over the lazy dog.
    Add Class

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 Class

Khi 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 Class

jQuery 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

Làm cách nào để xóa lớp CSS bằng jQuery?

Làm cách nào để xóa thuộc tính CSS cụ thể bằng jQuery?

Làm cách nào để thêm và xóa CSS bằng jQuery?

Làm cách nào để xóa kiểu bằng jQuery?