How to remove all CSS classes using jQuery ?

Last Updated : 31 Dec, 2020

In this article, we will remove all CSS classes for an element using jQuery. To remove all CSS classes of an element, we use removeClass() method.

The removeClass() method is used to remove one or more class names from the selected element.

Syntax:

$(selector).removeClass(class_name, function(index, class_name))

Parameters: This function accepts two parameters as mentioned above and described below:

class_name: It is optional parameter which is used to specify the class name (one or more class) to remove. Multiple class name separated with space.
function: It is optional parameter and it returns one or more class name which need to be removed.
1. index: This parameter is used to return index of element.
2. current_class_name: This parameter returns the class name of selected elements.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to remove all CSS classes using jQuery?
    </title>

    <style>
        .GFG1 {
            color: green;
        }

        .GFG2 {
            font-size: 30px;
            font-weight: bold;
        }
    </style>

    <!-- Import jQuery cdn library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").removeClass();
            });
        });
    </script>
</head>

<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        How to remove all CSS classes using jQuery?
    </h3>

    <p class="GFG1 GFG2">
        Computer Science Portal
    </p>

    <button>Click Here!</button>
</body>

</html>