jQuery removeClass and addClass Example

jQuery removeClass and addClass Example

jQuery add and remove css classes onclick; In this tutorial, you will learn how to add and remove css classes on html elements with onlick using addClass(), removeClass(), toggleClass() method.

jQuery Add Class and Remove Class

There are three types of jQuery method available to add remove classes of the selected html elements, you can use these methods to add remove class of the elements.

  • addClass() method
  • removeClass() method
  • toggleClass() method

jQuery addClass() Method

Using the jQuery addClass () method can adds one or more classes to the selected html elements.

Syntax

$(selector).addClass();

Example of jQuery addClass() method

You can see that example of the jquery addClass() method, the following example will add class of the selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
    padding: 15px;
    background: #1EBBA3;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_click").click(function(){
       $(".add_here").addClass("container");
    });
});
</script>
</head>
<body>
    <div class="add_here">
        <h1>Hello World!</h1>
        <p><strong>Note:</strong> If you click the following button it will add the '.container class' where is add_here exist </p>
        <button type="button" id="btn_click">Click Here</button>
    </div>
</body>
</html>                            

Output

Removing all the Contents using empty() jQuery

Hello World!

Note: If you click the following button it will add the ‘.container class’ where is add_here exist

jQuery removeClass() Method

Using the jQuery removeClass () method can remove one or more classes of the selected html elements. The removeClass() method can remove a single class, multiple classes of selected html elements.

Syntax

$(selector).removeClass();

Example of jQuery removeClass() method

You can see that example of the jquery removeClass() method, the following example will remove class of the selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
    padding: 15px;
    background: #1EBBA3;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_remove").click(function(){
       $(".add_here").removeClass("container");
    });
});
</script>
</head>
<body>
    <div class="add_here container">
        <h1>Hello World!</h1>
        <p><strong>Note:</strong> If you click the following button it will remove the '.container class', where is add_here class exist </p>
        <button type="button" id="btn_remove">Click Here</button>
    </div>
</body>
</html>                            

Output

Removing all the Contents using empty() jQuery

Hello World!

Note: If you click the following button it will remove the ‘.container class’, where is add_here class exist

jQuery toggleClass() Method

Using the jQuery toggleClass() can add or remove one or more classes from the selected html elements.
Incase if the selected html element already has the class, then it is removed.
if an element does not have the class, then it is added.

Syntax

$(selector).toggleClass();

Example of jQuery toggleClass() method

You can see that example of the jquery toggleClass() method, the following example will add remove class of the selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
    padding: 15px;
    background: #1EBBA3;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_toggle").click(function(){
       $(".add_here").toggleClass("container");
    });
});
</script>
</head>
<body>
    <div class="add_here container">
        <h1>Hello World!</h1>
        <p><strong>Note:</strong> If you click the following button it will add or remove the '.container class', where is add_here class exist </p>
        <button type="button" id="btn_toggle">Click Here</button>
    </div>
</body>
</html>                            

Output

Removing all the Contents using empty() jQuery

Hello World!

Note: If you click the following button it will add or remove the ‘.container class’, where is add_here class exist

Recommended jQuery Tutorial

  1. jQuery Remove Attribute and Disabled Attribute From Element
  2. jQuery | Event MouseUp By Example
  3. Event jQuery Mouseleave By Example
  4. jQuery Event Mouseenter Example
  5. Event jQuery MouseOver & MouseOut By Example
  6. keyup jquery event example
  7. Jquery Click Event Method with E.g.
  8. Event jQuery. Blur By Example
  9. jQuery form submit event with example
  10. keydown function jQuery
  11. List of jQuery Events Handling Methods with examples
  12. Jquery Selector by .class | name | #id | Elements
  13. How to Get the Current Page URL in jQuery
  14. jQuery Ajax Get() Method Example
  15. get radio button checked value jquery by id, name, class
  16. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  17. jQuery Get Data Text, Id, Attribute Value By Example
  18. Set data attribute value jquery
  19. select multiple class in jquery
  20. How to Remove Attribute Of Html Elements In jQuery
  21. How to Checked Unchecked Checkbox Using jQuery
  22. jQuery removeClass & addClass On Button Click By E.g.
  23. To Remove whitespace From String using jQuery
  24. jQuery Ajax Post Method Example
  25. jQuery Ajax Get Method Example
  26. To Load/Render html Page in div Using jQuery Ajax $.load
  27. jQuery Sibling Methods – To Find Siblings Elements
  28. jQuery Find Siblings Elements with Class, id

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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