How to Remove All CSS Classes Using jQuery/JavaScript

To remove all CSS classes, you can either use the jQuery methods or JavaScript properties.

The removeClass() Method

The most used method to remove all item’s classes is the <kbd class="highlighted">removeClass()</kbd> jQuery method. This method removes a single, multiple or all classes from each element in the set of matched elements. If a class name is specified as a parameter, only that class will be removed from the set of matched elements. If no class names are defined in the parameter, all classes will be removed.

Unlike .attr('class', '') or .removeAttr('class'), .removeClass() is specifically designed for this task and is the cleanest way to remove all classes without leaving empty attributes.

Javascript Jquery remove classes

$("#element").removeClass();

Example :

Javascript Jquery remove class

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <style>
      .green {
        color: green;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p class="green">First paragraph.</p>
    <p class="blue">Second paragraph.</p>
    <button id="buttonId">Remove classes</button>
    <script>
      $(document).ready(function() {
          $("#buttonId").click(function() {
              $("p").removeClass();
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

The .removeAttr() Method

The <kbd class="highlighted">.removeAttr()</kbd> method uses the <kbd class="highlighted">removeAttribute()</kbd> JavaScript function, but it is can be invoked directly on a jQuery object.

Javascript jquery remove attribute

$("#element").removeAttr('class');

Example:

Javascript Jquery removeAttr method

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" class="remove-attr">Remove Class</button>
    <script>
      $(document).ready(function() {
          $(".remove-attr").click(function() {
              $("button").removeAttr("class");
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

The .attr() method

If you set the class attribute to empty will remove all classes from the element but also leaves an empty class attribute on the DOM. The <kbd class="highlighted">.attr()</kbd> jQuery method gets the attribute value for the first element in the set.

Javascript jquery attribute

$("#element").attr('class', '');

Example:

Javascript jquery attr method

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" class="add-attr">Remove Class</button>
    <script>
      $(document).ready(function() {
          $(".add-attr").click(function() {
              $('button').attr("class", "");
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

The JavaScript className Property

You can use only pure JavaScript. Set the className property to an empty string to remove all classes from an element:

Javascript className property

document.getElementById('element').className = '';

Example:

Javascript className property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .addStyle {
        width: 500px;
        background-color: yellow;
        color: red;
        text-align: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="divId" class="addStyle">
      <h1>W3Docs</h1>
    </div>
    <button onclick="myFunction()">Click on button</button>
    <script>
      function myFunction() {
        document.getElementById("divId").className = "";
      }
    </script>
  </body>
</html>

Try it Yourself »

The className property returns the class name of an element.