Chúng ta có thể sử dụng jQuery để xóa một lớp (hoặc nhiều lớp) khỏi một phần tử chỉ bằng cách sử dụng phương thức removeClass ().

Bạn đang xem : jquery xóa lớp thành phần tử

Chúng ta có thể sử dụng jQuery để xóa một lớp khỏi một phần tử chỉ bằng cách sử dụng removeClass () phương thức.

  $ ("# div"). removeClass ("current-class");  

Hãy giả sử tôi có HTML sau:

  & lt; div id = "div" class = "current-class" & gt;
  & lt; p class = "p" & gt; Đây là một đoạn văn. & lt; / p & gt;
& lt; / div & gt;
 

Nếu chúng tôi muốn xóa lớp “lớp hiện có” khỏi #div, chúng tôi có thể sử dụng phương thức jQuery removeClass () để thực hiện việc này với JavaScript sau mã.

  $ ("# div"). removeClass ("current-class");  

HTML kết quả sẽ như sau:

  & lt; div id = "div" & gt;
  & lt; p class = "p" & gt; Đây là một đoạn văn. & lt; / p & gt;
& lt; / div & gt;
 

Nếu bạn đang sử dụng WordPress, đừng quên đổi $ thành jQuery như sau:

  jQuery (" #div "). removeClass (" remove-class ");  

Xoá một Lớp khỏi Phần tử HTML Sử dụng jQuery Bằng một Nhấp chuột

Chúng tôi có thể xoá một lớp khỏi một Phần tử HTML sử dụng jQuery rất dễ dàng bằng cách kết hợp phương thức removeClass () với sự kiện nhấp chuột .

Giả sử chúng tôi có mã HTML sau và chúng tôi muốn để cung cấp cho người dùng khả năng loại bỏ lớp “p” khỏi đoạn thứ hai. Bằng cách xóa lớp này, văn bản sẽ không bị gạch chân nữa.

  & lt; style & gt; .p {text-decoration: underline; } & lt; / style & gt;
& lt; div id = "div1" & gt;
  & lt; p id = "paragraph" class = "p" & gt; Đây là đoạn chúng tôi sẽ xóa lớp khỏi. & lt; / p & gt;
  & lt; div id = "click-me" & gt; Xóa Lớp & lt; / div & gt;
& lt; / div & gt;
 

Chúng ta có thể sử dụng cả phương thức jQuery click () và phương thức jQuery removeClass () để loại bỏ lớp khỏi đoạn văn và loại bỏ gạch dưới.

Dưới đây là mã JavaScript sẽ cho phép người dùng có thể xóa lớp khỏi đoạn:

  $ ( "# click-me"). nhấp vào (function () {
  $ ("# đoạn"). removeClass ("p");
});
 

Dưới đây là mã cuối cùng và đầu ra cho ví dụ về cách xóa một lớp bằng jQuery và JavaScript:

Xem Thêm  Cách loại bỏ, thay thế hoặc tạo kiểu cho các dấu đầu dòng bằng CSS thuần túy - css bỏ đạn khỏi li

Đầu ra mã:

Đây là đoạn chúng tôi sẽ xóa lớp khỏi đó.

Xóa lớp

Mã đầy đủ:

  & lt; style & gt; .p {text-decoration: underline; } & lt; / style & gt;
& lt; div id = "div1" & gt;
  & lt; p id = "paragraph" class = "p" & gt; Đây là đoạn chúng tôi sẽ xóa lớp khỏi. & lt; / p & gt;
  & lt; div id = "click-me" & gt; Xóa Lớp & lt; / div & gt;
& lt; / div & gt;
& lt; script & gt;
$ ("# click-me"). nhấp vào (function () {
  $ ("# đoạn"). removeClass ("p");
});
& lt; / script & gt;
 

Sử dụng jQuery để xóa nhiều lớp khỏi một phần tử HTML

Chúng ta có thể sử dụng phương thức jQuery removeClass () để xóa nhiều lớp thành một Phần tử HTML rất dễ dàng.

Chìa khóa để xóa nhiều lớp đối với các phần tử HTML của chúng tôi là đặt một khoảng trống giữa các lớp mà chúng tôi muốn xóa trong lệnh gọi removeClass ()

Ví dụ: nếu chúng ta muốn xóa các lớp “class-1” và “class-2” khỏi một div cụ thể, chúng ta có thể làm như vậy với mã JavaScript sau:

  $ ("# div"). removeClass ("class-1 class-2");  

Giả sử chúng ta có HTML sau:

 
& lt; style & gt; .class-1 {text-decoration: underline; } .class-2 {background-color: yellow; } & lt; / style & gt;
& lt; div id = "div1" & gt;
  & lt; p class = "class-1 class-2" & gt; Đây là đoạn chúng tôi sẽ xóa các lớp khỏi. & lt; / p & gt;
  & lt; div id = "click-me-1" class = "click-me" & gt; Xóa Lớp & lt; / div & gt;
& lt; / div & gt;
 

Nếu chúng ta muốn xóa các lớp “class-1” và “class-2” khỏi paragragh sau một cú nhấp chuột, chúng ta chỉ cần thực hiện như sau trong mã JavaScript của mình:

  $ ("# click-me-1"). click (function () {
  $ (". class-1"). removeClass ("class-1 class-2");
});
 

Kết quả là đoạn văn sẽ không có màu nền là màu vàng và không có gạch chân toàn bộ văn bản.

Đoạn mã cuối cùng và đầu ra cho đoạn này Dưới đây là ví dụ về cách xóa một lớp bằng jQuery và JavaScript:

Đầu ra mã:

Đây là đoạn chúng tôi sẽ xóa các lớp từ.

Xóa lớp học

Mã đầy đủ:


& lt; style & gt; .class-1 {text-decoration: underline; } .class-2 {background-color: yellow; } & lt; / style & gt;
& lt; div id = "div1" & gt;
  & lt; p class = "class-1 class-2" & gt; Đây là đoạn chúng tôi sẽ xóa các lớp khỏi. & lt; / p & gt;
  & lt; div id = "click-me-1" class = "click-me" & gt; Xóa Lớp & lt; / div & gt;
& lt; / div & gt;
& lt; script & gt;
$ ("# click-me-1"). nhấp vào (function () {
  $ (". class-1"). removeClass ("class-1 class-2");
});
& lt; / script & gt;
 

Sử dụng jQuery để xóa tất cả các lớp khỏi một phần tử HTML

Chúng ta có thể sử dụng phương thức jQuery removeClass () để xóa tất cả các lớp khỏi một Phần tử HTML rất dễ dàng.

Xem Thêm  Sử dụng Pi trong Python (NumPy và Math) • datagy - pi trong python là gì

Việc xóa tất cả các lớp khỏi một phần tử HTML được thực hiện bằng cách để trống lệnh gọi removeClass ().

Ví dụ: nếu chúng ta muốn xóa tất cả các lớp khỏi một đoạn văn, chúng ta có thể làm như vậy với mã JavaScript sau:

  $ ("# div"). removeClass ();  

< p> Giả sử chúng ta có HTML sau:

 
& lt; style & gt; .class-3 {text-decoration: underline; } .class-4 {background-color: yellow; } .class-5 {font-weight: 700; } & lt; / style & gt;
& lt; div id = "div2" & gt;
  & lt; p class = "class-3 class-4 class-5" & gt; Đây là đoạn chúng tôi sẽ xóa TẤT CẢ các lớp khỏi. & lt; / p & gt;
  & lt; div id = "click-me-2" class = "click-me" & gt; Xóa Tất cả các Lớp & lt; / div & gt;
& lt; / div & gt;
 

Nếu chúng ta muốn xóa các lớp “class-3”, “class-4” và “class-5” khỏi div này sau một cú nhấp chuột, chúng ta chỉ cần thực hiện như sau trong mã JavaScript của chúng tôi:

  $ ("# click-me-2"). nhấp (function () {
  $ (". class-3"). removeClass ();
});
 

Kết quả là đoạn văn sẽ không có màu nền là màu vàng, không được in đậm và không có gạch chân toàn bộ văn bản.

mã cuối cùng và đầu ra cho ví dụ này về cách xóa tất cả các lớp bằng jQuery và JavaScript dưới đây:

Đầu ra mã:

Đây là đoạn chúng tôi sẽ xóa TẤT CẢ các lớp khỏi đó.

Xóa Tất cả các Lớp

Mã đầy đủ:

 
& lt; style & gt; .class-3 {text-decoration: underline; } .class-4 {background-color: yellow; } .class-5 {font-weight: 700; } & lt; / style & gt;
& lt; div id = "div2" & gt;
  & lt; p class = "class-3 class-4 class-5" & gt; Đây là đoạn chúng tôi sẽ xóa TẤT CẢ các lớp khỏi. & lt; / p & gt;
  & lt; div id = "click-me-2" class = "click-me" & gt; Xóa Tất cả các Lớp & lt; / div & gt;
& lt; / div & gt;
& lt; script & gt;
$ ("# click-me-2"). nhấp vào (function () {
  $ (". class-3"). removeClass ();
});
& lt; / script & gt;
 

Hy vọng rằng bài viết này hữu ích cho bạn trong việc hiểu cách sử dụng jQuery để xóa một lớp.

Xem Thêm  Làm thế nào để khai báo một mảng trong Python? - khai báo mảng trong python


Xem thêm những thông tin liên quan đến chủ đề jquery loại bỏ lớp thành phần tử

demo HTML+jQuery API consume OMDBAPI

  • Tác giả: Dao Thang
  • Ngày đăng: 2021-01-23
  • Đánh giá: 4 ⭐ ( 5411 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Consume basic API on OMDB using jQuery, showing on bootstrap & bootstrap modal

Xóa phần tử khỏi DOM HTML với jQuery

  • Tác giả: xuanthulab.net
  • Đánh giá: 5 ⭐ ( 9050 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các phương thức .remove, .empty(), .detach() trong jQuery để loại bỏ phần tử khỏi DOM HTML

Phương thức removeClass() trong jQuery

  • Tác giả: webcoban.vn
  • Đánh giá: 5 ⭐ ( 9777 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng phương thức removeClass() trong jQuery để xóa tên lớp khỏi thuộc tính class của phần tử HTML bằng jQuery

Loại bỏ nhiều lớp (jQuery)

  • Tác giả: vi.chefbradleyogden.com
  • Đánh giá: 3 ⭐ ( 5843 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có cách nào tốt hơn để viết lại điều này không: $ (‘element’). RemoveClass (‘class1’). RemoveClass (‘class2’); Tôi không thể sử dụng removeClass (); vì nó sẽ xóa TẤT CẢ các lớp mà tôi không muốn.

Hướng dẫn và ví dụ jQuery

  • Tác giả: openplanning.net
  • Đánh giá: 5 ⭐ ( 2676 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tham khảo jQuery

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 5126 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham khảo jQuery giúp bạn củng cố thêm kiến thức và hiểu rõ hơn những gì bạn đã học – Học Web Chuẩn

Xóa phần tử trong Array JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 1334 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xóa phần tử trong Array JavaScript là một bài toán mà hầu hết mọi người đều gặp phải khi lập trình JavaScript. Để giải quyết bài toán này, JavaScript cung cấp rất nhiều giải pháp khác nhau. Mỗi giải…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php