How to Remove All CSS Classes Using jQuery/JavaScript

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

Watch a course JavaScript -The Complete Guide (Beginner + Advanced)

The removeClass() Method

The most used method to remove all item’s classes is the removeClass() 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.

$("#element").removeClass();
Example : 
<!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>

The .removeAttr() Method

The .removeAttr() method uses the removeAttribute() JavaScript function, but it is can be invoked directly on a jQuery object.

$("#element").removeAttr('class');
Example: 
<!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>
    <a href="#">Link </a>
    <button type="button" class="remove-attr"> Remove Link</button>
    <script>
      $(document).ready(function() {
          $(".remove-attr").click(function() {
              $("a").removeAttr("href");
            });
        });
    </script>
  </body>
</html>

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 .attr() jQuery method gets the attribute value for the first element in the set.

$("#element").attr('class', '');
Example: 
<!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">Select Checkbox</button>
    <input type="checkbox">
    <script>
      $(document).ready(function() {
          $(".add-attr").click(function() {
              $('input[type="checkbox"]').attr("checked", "checked");
              alert('Checked!');
            });
        });
    </script>
  </body>
</html>

The JavaScript className Property

You can use only pure JavaScript. Set the className attribute to empty which will set the value of the class attribute to null:

document.getElementById('element').className = '';
Example: 
<!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">
      <h1>W3Docs</h1>
    </div>
    <button onclick="myFunction()">Click on button</button>
    <script>
      function myFunction() {
        document.getElementById("divId").className = "addStyle";
      }
    </script>
  </body>
</html>

The className property returns the class name of an element.