jQuery removeClass() example

The removeClass() method removes one or more class names from the selected elements.

Description

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

Syntax

.removeClass( [className ] )
className - One or more space-separated classes to be removed from the class attribute of each matched element.
.removeClass( function )
function - String 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.

Example 1

Remove the class 'blue' from the matched elements.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>removeClass demo</title>
    <style>
        p {
            margin: 4px;
            font-size: 16px;
            font-weight: bolder;
        }

        .blue {
            color: blue;
        }

        .under {
            text-decoration: underline;
        }

        .highlight {
            background: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>

    <script>
        $("p:even").removeClass("blue");
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

Remove the class 'blue' and 'under' from the matched elements.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>removeClass demo</title>
    <style>
        p {
            margin: 4px;
            font-size: 16px;
            font-weight: bolder;
        }

        .blue {
            color: blue;
        }

        .under {
            text-decoration: underline;
        }

        .highlight {
            background: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>

    <script>
        $("p:odd").removeClass("blue under");
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 3

Remove all the classes from the matched elements.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>removeClass demo</title>
    <style>
        p {
            margin: 4px;
            font-size: 16px;
            font-weight: bolder;
        }

        .blue {
            color: blue;
        }

        .under {
            text-decoration: underline;
        }

        .highlight {
            background: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>

    <script>
        $("p").eq(1).removeClass();
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

References


Comments