How to use the addClass() and removeClass() methods In JQuery

Using the toggleClass() method

The addClass() and removeClass() methods are respectively used to add and remove the CSS classes when there is a need to add or remove them from the webpage on the occurrence of an event.

Syntax:

// Adding class using addClass()
$('selector').addClass(class_name);
// Adding class using removeClass()
$('selector').removeClass(class_name);

Example: The following example adds a class that makes the background color black when clicked on ADD CLASS button and also removes that added class when clicked on the REMOVE CLASS button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <!-- Including jQuery  -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
    </script>
 
    <style>
        h1 {
            color: #006600;
        }
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
        }
        div {
            margin: 2rem;
            text-align: center;
        }
        #GFG_IMAGE{
            position: relative;
            transition: transform 0.5s ease-in;
            transform-style: preserve-3d;
        }
        .flip {
            transform: rotateY(180deg);
        }
    </style>
</head>
 
<body>
    <center>
        <h1>w3wiki</h1>
        <h3>Flip the image by adding the .flip class</h3>
        <button id="btnadd"> ADD CLASS </button>
        <button id="btnremove"> REMOVE CLASS </button>
        <div id="GFG_IMAGE">
            <!-- Image added using img tag 
                with src attribute -->
            <img src=
"https://media.w3wiki.org/wp-content/uploads/20231212145751/gfgImage.png"
                 height='150px' width='150px'>
            <img>
        </div>
    </center>
    <script>
        $(document).ready(function() {
            $('#btnadd').click(function() {
                $('#GFG_IMAGE').addClass('flip');
            });
            $('#btnremove').click(function() {
                $('#GFG_IMAGE').removeClass('flip');
            });
        });
    </script>
</body>
 
</html>

Output:

How to Add or Remove class in jQuery ?

In this article, we are going to learn about the different methods to add and remove classes from an HTML element using jQuery. There are two ways in which we can achieve this in jQuery.

Table of Content

Using the addClass() and removeClass() methods
Using the toggleClass() method

Tags:

#jQuery-Questions #JQuery #Web Technologies

Using the toggleClass() method

How to use the addClass() and removeClass() methods In JQuery

HTML

How to Add or Remove class in jQuery ?

Similar Reads

Contact Us