Add and remove class dynamically to an element using jQuery

Adding and removing class dynamically to an element can make a web page more interactive. Using jQuery it becomes a simple and easy task to add and remove class dynamically. It just needs to call a jQuery function with the selector where we want to add a class or remove a class.

Print content as PDF from a particular div element using jQuery

jQuery multiple events to trigger same function

jQuery provides two functions or methods for this specific task. these are addClass and removeClass. using addClass() method of jQuery, we can add class to any element. Similarly, removeClass() method can remove a class from an element.

Now we are going to see the basic usage of these two methods.



Usage of addClass jQuery function

Below is the syntax which shows the usage of addClass jquery function:

$("selector").addClass("myClass");

In the above code, we have added a class that is called “myClass” to an element by providing the selector.

For better understanding, let’s see an example:

First, create a CSS class “makeRed”:

.makeRed {
    color: red;
 }

If we add the above class to an element then it will make the text red. But we are going to add the class dynamically through JavaScript. We are going to use jQuery addClass method to add “makeRed ” to our element. We will make an h2 heading text color red by adding “makeRed” class dynamically.

Immediately submit upload form after selecting file

Send AJAX request every n seconds using jQuery

Below is our HTML code which contains a button with id “myBtn”. We are going to use jQuery click function so that by clicking the button will add “makeRed” class to our h2 text:

<h2>This is an h2 heading text which will change its color</h2>
<button id="myBtn">Add "makeRed" class to the above heading text</button>

Now below is our jQuery code:

$(document).ready(function(){
    $("#myBtn").click(function(){
        $("h2").addClass("makeRed");
    });
});

That’s it. Now we can add “makeRed” class just by clicking on the button.

Usage of removeClass jQuery function

Below the syntax is given which shows the usage of removeClass() jQuery function:

$("selector").addClass("myClass");

Now see an example.

First, write our HTML code:

<h2 class="makeRed">This is an h2 heading text which will change its color</h2>
<button id="myBtn">Remove "makeRed" class to the above heading text</button>

In the above code, we have used the same class “makeRed”. It is already added to the h2 tag. Now we are going to remove the class just by clicking on the button. The CSS code is same as before.

Now below is the jQuery code:

    $(document).ready(function(){
          $("#myBtn").click(function(){
              $("h2").removeClass("makeRed");
          });
      });

Now test it on the browser and we will see that just by clicking the button make the text default again from red as the code removing the class “makeRed”.


I hope you enjoyed this tutorial.

 

Leave a Reply

Your email address will not be published. Required fields are marked *