How to remove Style attribute from a DIV element using jQuery

Let us assume, I have a <div> element on my web page and I have applied some style at design time. Later at run time, I want to completely remove the style attribute from the DIV element using jQuery. You can use the .removeAttr() method to remove style attribute of an element. I’ll show you how.

Usually, the style attribute is used to specify inline style to an element. For example,

<div style="color: #fff; padding: 10px;">
    … some text here.
<div>

The Script

Here’s the jQuery script to remove the inline style completely from the <div> element.

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

<body>
  <div id='t1' style='padding: 10px; color: #fff; background-color: #999;'>
      Hello, I am Arun Banik
  </div>
</body>

<script>
    $(document).ready(function () {
        $('#t1').removeAttr('style');
    });
</script>
</html>

Try it

The removeAttr() method completely removes the style (the inline style) that I have applied to <div> element. All that is left is the default styles.

How to Remove Class Attribute using jQuery

This is a bonus.

You can apply CSS style to an element using the style attribute (the inline method). However, you can also apply style to an element using the Class attribute.

You can define multiple classes to an element or multiple elements can use or share the same class.

So, in some cases you might have to remove the class attribute. I’ll show you how.

<!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;
        }
    </style>
</head>

<body>
  <!-- this DIV has a class. -->
  <div id='t1' class='intro'>
      Hello, I am Arun Banik
  </div>
</body>

<script>
    $(document).ready(function () {
        $('#t1').removeClass();
    });
</script>
</html>

Try it

Conclusion

Well, you came looking for one solution, I gave you two solutions. Both solutions are useful.

You can now remove the style attribute from a <div> element using jQuery removeAttr() method. this is for inline style.

And,

you can also remove the class attribute from a <div> element using jQuery removeClass() method (in case you applied style using a class).

← PreviousNext →