How To Add / Remove CSS Class Dynamically In JQuery

This example shows how to add or remove the CSS class dynamically using the JQuery events. JQuery comes with method called addClass() to add CSS class dynamically. It shows how to add class attributes to different elements. We can add one or more classes within addClass() method. JQuery has provided another method called removeClass() to remove CSS class from the selected elements.

Add and Remove Class Example

<!doctype html>
<head>
<title>JQuery Add and Remove Class</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Add and Remove Class Example</h2>
<style type="text/css">
   .red
   {
      color:red;
   }
   .highlight
   {
      background:green;
   }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#myaddclass").click(function(){
        $("h3,h5").addClass("red");
          $("h4").addClass("highlight");
      });
      $("#myremoveclass").click(function(){
        $("h4").removeClass("highlight");
      });
   });
</script>
<body>
   <button id="myaddclass">Add Color</button>
   <button id="myremoveclass">Remove Color</button>
   <h3>Hello world!!!!</h3>
   <h4>Welcome to JQuery!!!!</h4>
    <h5>JQuery is a JavaScript Library. </h5>
</body>
</html>

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
$(“#myaddclass”).click(function()) line defines click event which occurs when button is clicked. Here we are using, button id #myaddclass.
The lines $(“h3,h5”).addClass(“red”); and $(“h4”).addClass(“highlight”); adds CSS class dynamically which uses CSS style sheet properties which sets h3 ,h5 lines to red color and h4 line will be highlighted with green color when we click on the Add Color button.
The lines $(“#myremoveclass”).click(function()) { $(“h4”).removeClass(“highlight”);} removes the color of h4 line when we click on the Remove Color button .