Add, Remove & Toggle CSS Class from an Element with jQuery

As in JavaScript, users have used the classList.remove() function to remove a CSS class. Also, using jQuery, users can remove a single class, multiple classes, or every class from the selected HTML element. But most of the time, users use the removeClass() jQuery method to remove classes from elements.

There are other methods in jQuery that helps to add or remove classes from the HTML element. This article will discuss the various methods to remove single or multiple classes from the HTML element.

How to remove a CSS class from an HTML element using jQuery?

Users can use the two methods in jQuery namely removeClass() and toggleClass() method. The removeClass() is one of the most commonly used methods in jQuery that only removes a CSS class, whereas the toggleClass() method adds and removes one or more classes.

We will discuss the two methods with their respective code snippets in the following section of this article.

Method 1: Using the removeClass() method to remove one or more than one CSS class in jQuery:

The removeClass() method in jQuery removes one or more CSS classes from all the specified HTML elements.

$(selector).removeClass(class_name, function(index, class_name))

Parameters used:

It has two parameters, and these are as follows:

• class_name: Users can use this parameter to specify the class name, which can be one or more classes to remove. They can separate multiple class names with space. This parameter is optional.
• function: Users use this optional parameter to return one or more CSS class names that they need to remove.
• index: The index parameter returns the index of the HTML element.
• current_class_name: The parameter can help to return the class name of specified HTML elements.

Code Snippet:

     .demo1 < color: maroon; >.demo2    
This is jQuery
 
We will learn how to remove CSS classes or class from the HTML elements using jQuery.
 
Observe the color of the font after clicking the button.
 Click Here!  

After clicking the button:

Explanation:

In the above code snippet, we have used the removeClass() method that removes two CSS classes, namely demo1 and demo2. We have added a button using the HTML tag. The button is to remove the CSS classes.

When a user clicks the button, the browser calls the removeClass() method and removes the CSS class from the image element. The method, when called, removes the font color from the text of that particular class. Users can remove one or two CSS classes from the selected element using this jQuery method.

Method 2: Using the toggleClass() method to remove one or more CSS classes in jQuery:

It is the second method in this article, which also helps toggle or change the class attached to the specified element. It is an inbuilt method in jQuery. Users can toggle between adding and removing one or more CSS classes using this method.

It checks every HTML element for the selected class names. If users already set the class name, it removes the class property, and if users do not add the class name, the toggleClass() method adds it.

$(selector).toggleClass(classname,function(index,currentclass),switch) 

• classname: Users use this parameter to specify one or more CSS classes to add or remove. If they use multiple CSS classes they need to separate them by space. The classname parameter is mandatory.
• function (index, currentclass): This parameter helps to specify one or more CSS class names that users want to add or remove. It is an optional parameter.
• index: Users use this parameter to add the index position of the element in the set.
• currentclass: Users use this parameter to add the current class name of the selected element.
• switch: This parameter is a Boolean value specifying whether a user will add the class showing true value or remove it, showing false. It is an optional parameter.

Code Snippet:

    p < padding: 20px; cursor: pointer; font: bold 16px sans-serif; >.toggle    
This is an example of the jQuery toogleClass() method.
 
This is an example of the jQuery toogleClass() method.
 
This is an example of the jQuery toogleClass() method.
   

Explanation:

This method is the same as that we used in the first method. The jQuery toggleClass() method both adds or removes one or more CSS classes from the specified elements. It does this in such a way that if the selected element already has a CSS class, it will remove the class, and if it does not have a class, it will add the class.

How to add a CSS class from an HTML element using jQuery?

To add a CSS class is just the inverse of the remove a CSS class. We can use the addClass() method that adds one or more classes to the specified HTML element.

Also, we have discussed another jQuery method, i.e., the toggleClass() , in the above section of this article. This method both adds one or more classes form the element. But we will mainly focus on the addClass() method of jQuery.

Code Snippet:

    .the_header < color: green; text-transform: uppercase; >.CSS_class    
This is jQuery
 
We will learn how to remove CSS classes or class from the HTML elements using jQuery.
 
Tip: Observe the color of the font after clicking the button.
 Adding Class   

After clicking the button:

Explanation:

In the above code snippet, we have used the addClass() method that add two CSS classes, namely the_header and CSS_class. We have added a button using the HTML tag. The button is to add the CSS classes.

When a user clicks the button, the browser calls the addClass() method and add the CSS class from the text element. The method, when called, adds the font color from the text of that particular class. Users can add one or two CSS classes from the selected element using this jQuery method.

We have come to the end of this article, where we discussed the two methods of jQuery that removes the CSS classes from the selected element. According to the program, users can use any one way to either remove using the removeClass() method or both add and remove the CSS classes with the toggleClass() method.

Источник

jQuery Add and Remove CSS Classes

In this tutorial you will learn how to add or remove CSS classes using jQuery.

jQuery CSS Classes Manipulation

jQuery provides several methods, such as addClass() , removeClass() , toggleClass() , etc. to manipulate the CSS classes assigned to HTML elements.

jQuery addClass() Method

The jQuery addClass() method adds one or more classes to the selected elements.

Example

     .page-header < color: red; text-transform: uppercase; >.highlight    
Demo Text
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
Tip: Lorem Ipsum is dummy text.
 Add Class  

You can also add multiple classes to the elements at a time. Just specify the space separated list of classes within the addClass() method, like this:

Example

     .page-header < color: red; text-transform: uppercase; >.highlight    
Hello World
 
The quick brown fox jumps over the lazy dog.
 Add Class  

jQuery removeClass() Method

Similarly, you can remove the classes from the elements using the jQuery removeClass() method. The removeClass() method can remove a single class, multiple classes, or all classes at once from the selected elements.

The following example will remove the class .page-header from the and the class .hint and .highlight from the

elements on button click.

Example

     .page-header < color: red; text-transform: uppercase; >.highlight    
Demo Text
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
Tip: Lorem Ipsum is dummy text.
 Remove Class  

When the removeClass() method is called without an argument it will remove all the classes from the selected elements. Here’s an example:

Example

     .page-header < color: red; text-transform: uppercase; >.highlight    
Demo Text
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
Tip: Lorem Ipsum is dummy text.
 Remove Class  

jQuery toggleClass() Method

The jQuery toggleClass() add or remove one or more classes from the selected elements in such a way that if the selected element already has the class, then it is removed; if an element does not have the class, then it is added i.e. toggle classes.

Example

     p < padding: 10px; cursor: pointer; font: bold 16px sans-serif; >.highlight    
Click on me to toggle highlighting.
 
Click on me to toggle highlighting.
 
Click on me to toggle highlighting.
  

You will learn about the CSS properties manipulation in next chapter »

Источник

.removeClass()

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

Contents:

.removeClass( className ) Returns: jQuery

Description: Remove a single class or multiple classes from each element in the set of matched elements.

version added: 1.0 .removeClass( className )

version added: 3.3 .removeClass( classNames )

version added: 1.4 .removeClass( function )

A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.

version added: 3.3 .removeClass( function )

A function returning one or more space-separated class names or an array of class names to be removed. Receives the index position of the element in the set and the old class value as arguments.

Before jQuery version 1.12/2.2, the .removeClass() method manipulated the className property of the selected elements, not the class attribute. Once the property was changed, it was the browser that updated the attribute accordingly. This means that when the class attribute was updated and the last class name was removed, the browser might have set the attribute’s value to an empty string instead of removing the attribute completely. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).

As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the class attribute is used instead. So, .removeClass() can be used on XML or SVG documents.

More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:

 $( "p" ).removeClass( "myClass yourClass" )

This method is often used with .addClass() to switch elements’ classes from one to another, like so:

 $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.

To replace all existing classes with another class, we can use .attr( «class», «newClass» ) instead.

As of jQuery 1.4, the .removeClass() method allows us to indicate the class to be removed by passing in a function.

 $( "li" ).last().removeClass(function( ) 
 return $( this ).prev().attr( "class" );
 >);

.menu < list-style: none; >.menu li < font-size: 20px; margin: 10px; padding: 10px; cursor: pointer; display: inline-block; border-radius: 4px; >.menu < width: 450px; margin: 0 auto; background: rgba(16 18 27 / 40%); border-radius: 8px; backdrop-filter: blur(20px); >.menu-container < margin: 0; padding: 0; height: 100%; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; >.active