How to remove Class attribute from a DIV element using jQuery

css jquery

← PrevNext →

Tools you can use

Using jQuery removeClass() method. Yes, you can completely remove any number of class names that is assigned to a <div> element or any element using the removeClass() method.
Syntax

removeClass(class_name)

The removeClass() method takes a parameter, the class_name. So, if you want to remove a single or specific number of class names, you will have to assign the class name(s), all separated by a space. For example,

.removeClass(class1 class2)

And, if you do not assign any parameter to the removeClass() method, it will remove all the class names that is assigned the element.

Ok, let’s get on with the examples.

Script to Remove all Class Attributes of <div> element

Let us assume, I have a <div> element to which I have assigned two class attributes (.intro and .g1). I want to remove all the class attributes.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .intro {
    color: #fff;
    padding: 10px;
    background-color: red;
  }
  .g1::before {
    content: 'Hi there :-) ';
  }
</style>
</head>

<body>
  <!--   this DIV has class names. -->
  <div id='t1' class='intro g1'>
      I am Arun Banik
  </div>
  
  <p>
    <input type='button' value='Click to remove class attribute' id='bt'>
  </p>
</body>

<script>
    $(document).ready(function () {
        $('#bt').on('click', function () {
            $('#t1').removeClass();
        })
    });
</script>
</html>
Try it

Related Article

Remove multiple class names from an element with the click of a button using JavaScript

Remove Specific Class Attribute using jQuery

You can remove specific (or particular) class attribute(s) using jQuery.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
    .intro {
    color: #fff;
    padding: 10px;
    background-color: red;
    }
    .g1::before {
    content: 'Hi there :-) ';
    }
</style>
</head>

<body>
  <!--   DIV has two class names and only one will be removed. -->
  <div id='t1' class='intro g1'>
      I am Arun Banik
  </div>
  
  <p>
    <input type='button' value='Click to remove class attribute' id='bt'>
  </p>
</body>

<script>
    $(document).ready(function () {
        $('#bt').on('click', function () {
            $('#t1').removeClass('g1');     // DIV has two class names and only one will be removed.
        })
    });
</script>
</html>
Try it

Remove Class Attributes using Element Selector in jQuery

In the above examples, I have used id selector with the removeClass() method.

You can also use the element selector to remove class names assigned to specific type of elements. For example, I want to remove class attribute of <div> elements only.

<script>
    $(document).ready(function () {
        $('#bt').on('click', function () {
            $('div').removeClass();    // using removeClass() with element selector.
        })
    });
</script>

Happy coding. 🙂

← PreviousNext →