Làm cách nào để xóa thuộc tính lớp trong JavaScript?

Phạm vi của Điều

Có một số lý do khiến bạn có thể cần xóa các lớp trong HTML. Một ví dụ mà chúng tôi đã thấy là khi chúng tôi tạo thanh trượt bằng HTML, CSS và javascript. Trong khi xây dựng thanh trượt của mình, chúng tôi đã tạo lớp chính và thao tác với lớp đó bằng cách thêm và xóa lớp đó khỏi hình ảnh. Điều này đã giúp thanh trượt của chúng tôi hoạt động bằng cách thay đổi hình ảnh. Nếu bạn không quen với điều này, thì bạn có thể xem bài viết tại đây

Javascript giúp chúng ta thao tác với các Phần tử HTML dễ dàng hơn. Người ta có thể dễ dàng thêm hoặc xóa không chỉ các thuộc tính mà cả các phần tử. Chúng ta cũng có thể sử dụng Jquery để xóa lớp vì nó là thư viện javascript. Cả javascript và Jquery đều cung cấp một danh sách đầy đủ các phương thức dựng sẵn mà chúng ta có thể sử dụng để xóa lớp. Chúng ta sẽ khám phá từng phương pháp một và hiểu cách thức hoạt động của từng phương pháp này

Giới thiệu

Có một danh sách việc cần làm được xây dựng bằng HTML, CSS và Javascript. Người dùng nhập nhiệm vụ cần thực hiện. Theo mặc định, tất cả các tác vụ này đang hoạt động và cần được thực hiện. Giờ đây, khi người dùng đã hoàn thành một tác vụ, họ có thể xóa/gạch bỏ tác vụ đó khỏi danh sách việc cần làm

Ví dụ trên minh họa việc loại bỏ lớp javascript. Ban đầu, các mục trong danh sách việc cần làm có tên lớp class=active. Điều này cho phép người dùng biết rằng nhiệm vụ vẫn đang hoạt động và cần được thực hiện. khi người dùng đã thực hiện tác vụ, họ cần xóa class=active khỏi mục danh sách việc cần làm. Điều này sẽ cho người dùng biết rằng họ đã hoàn thành nhiệm vụ. Để xóa lớp khỏi HTML, bạn có thể sử dụng Javascript hoặc Jquery

Sử dụng Javascript hoặc Jquery, bạn có thể dễ dàng xóa một lớp. Hãy xem và hiểu cách chúng ta có thể loại bỏ lớp trong javascript

Làm cách nào để xóa lớp trong Javascript?

Cả Javascript và JQuery đều cung cấp nhiều phương thức dựng sẵn mà người ta có thể sử dụng để loại bỏ lớp. Hãy xem từng phương pháp này và hiểu cách chúng hoạt động

Loại bỏ phương pháp

Phương thức remove là một hàm đơn giản mà bạn có thể sử dụng để xóa một lớp trong javascript. Tất cả những gì bạn cần làm là chỉ định phần tử mà bạn muốn xóa lớp. Khi bạn đã chỉ định phần tử, bạn có thể gọi hàm xóa từ hàm classList của phần tử đã chọn. phương thức classList chỉ định tất cả các lớp được liên kết với phần tử cụ thể. Từ danh sách lớp, bạn có thể chọn lớp bạn muốn xóa và chuyển nó sang phương thức xóa. Phương thức loại bỏ cũng có thể nhận nhiều đầu vào. Bạn có thể cung cấp tất cả các lớp bạn muốn xóa khỏi phần tử và nó sẽ làm điều đó. Điều này giúp xử lý dễ dàng hơn khi bạn đang xây dựng các ứng dụng web phức tạp yêu cầu xử lý nhiều lớp cho cùng một phần tử

cú pháp

//Element can be selected using the getElement method or some other method using DOM Manipulation in HTML.

element.classList.remove(className);
chuyển đổi phương thức Class
toggleClass tương tự như phương thức remove trong javascript. Sự khác biệt chính là thay vì loại bỏ lớp hoàn toàn, nó tạm thời loại bỏ nó. Phương thức toggleClass được sử dụng khi bạn muốn chuyển đổi một lớp. Điều này có nghĩa là gì?
phương thức toggleClass giúp bạn thêm hoặc xóa cùng một lớp cho phần tử. Ví dụ: giả sử bạn muốn xóa một lớp khi nhấp vào nút. Tuy nhiên, khi nhấp lại vào nút, bạn muốn thêm cùng một lớp đã bị xóa. Trong trường hợp này, bạn có thể sử dụng phương thức toggleClass. phương thức toggleClass chỉ khả dụng để sử dụng trong JQuery. 
cú pháp

//Element Name can be selected by using a unique ID or unique Class name.

$(elementName).toggleClass(className);

Tương tự như phương thức remove, phương thức toggleClass được áp dụng cho một phần tử mà bạn muốn chuyển đổi lớp từ đó



Phương thức removeClass
Nếu bạn chỉ muốn xóa lớp trong jQuery và không chuyển đổi nó, thì bạn có thể sử dụng phương thức removeClass. phương thức removeClass xóa vĩnh viễn JQuery. Cú pháp của removeClass tương tự như phương thức toggleClass, tuy nhiên, cách hoạt động hoàn toàn khác. Không thể thêm lại một lớp sau khi bị xóa bởi phương thức removeClass mà không sử dụng phương thức addClass trong JQuery. Nó bị xóa vĩnh viễn khỏi phần tử
cú pháp

//Element Name can be selected by using a unique ID or unique Class name.

$(elementName).removeClass(className);

Bây giờ chúng ta đã biết cách xóa lớp trong javascript và JQuery, hãy bắt tay vào thực hiện một số ví dụ về cách xóa lớp trong javascript

Ví dụ để loại bỏ lớp trong Javascript

Trong ví dụ này, chúng ta sẽ xem các ví dụ về cách loại bỏ lớp trong javascript và JQuery. Chúng ta sẽ tìm hiểu thông qua trải nghiệm thực tế về cả ba phương thức loại bỏ lớp trong javascript và JQuery

Trong thực tế khi xây dựng bất kỳ tính năng nào yêu cầu loại bỏ lớp, chúng ta thường sử dụng một số loại trình xử lý sự kiện nhất định. Khi người dùng thực hiện một hành động nào đó như nhấn phím hoặc nhấp vào nút, thì chúng tôi sẽ khởi tạo phương thức loại bỏ lớp khỏi phần tử. Chúng ta sẽ sử dụng điều tương tự ở đây. Hãy bắt đầu với một số ví dụ về cách xóa lớp trong javascript

Ví dụ về việc sử dụng Phương thức Loại bỏ

Trong ví dụ này, chúng tôi sẽ sử dụng phương thức remove của Javascript để xóa một lớp khỏi Phần tử HTML

Mã số

    
    Learning How to remove class in JS




    
Click the "Remove Class" button to remove the "main" class from the DIV element:

    Remove Class

    

    This is a DIV element.
    

    




đầu ra
Giải trình
Trong ví dụ trên, chúng tôi loại bỏ lớp chính khỏi phần tử div. Chúng tôi đã chọn phần tử bằng id phần tử duy nhất mainDiv. Sau đó, chúng tôi đã thêm trình xử lý sự kiện onclick kích hoạt chức năng removeClassJQuery khi người dùng nhấp vào nút. Hàm loại bỏ lớp chính khỏi phần tử một cách dễ dàng
 

			
Làm cách nào để xóa thuộc tính JavaScript?
			
Sử dụng removeAttribute() để xóa thuộc tính khỏi phần tử đã chỉ định . Đặt giá trị của thuộc tính Boolean thành false sẽ không hoạt động; . 
		
			
Làm cách nào để xóa lớp trong JavaScript?
			
Để xóa tất cả các lớp khỏi một phần tử trong JavaScript,  đặt thuộc tính className của phần tử thành một chuỗi trống ( '' ) , i. e. , thành phần. tên lớp = ''. Đặt thuộc tính className thành một chuỗi trống sẽ loại bỏ mọi lớp trong phần tử. const btn = tài liệu. 
		
			
Làm cách nào để xóa lớp đang hoạt động trong JavaScript?
			
Cú pháp. Sau đây là cú pháp của phương thức removeClass().  $(bộ chọn).  removeClass(classname,function(index,currentclass))
		
			
Làm cách nào để thay đổi thuộc tính lớp trong JavaScript?
			
Để thay đổi tất cả các lớp cho một phần tử và thay thế tất cả các lớp hiện có bằng một hoặc nhiều lớp mới, hãy đặt thuộc tính className như thế này.  . 
 
tài liệu.  .  
 
tài liệu. getElementById("MyElement"). className += "MyClass";
 
nếu (tài liệu. getElementById("MyElement"). tên lớp. trận đấu(/(?.  .  
 
$('#Yếu tố của tôi').  .  
 
$('#Yếu tố của tôi')