How to Remove all Inline Styles using JavaScript/jQuery?

Last Updated : 14 Oct, 2024

To remove all inline styles from an element using JavaScript or jQuery, the removeAttribute method in JavaScript or the removeAttr method in jQuery can be used.

Approach:

The jQuery attr() and removeAttr() methods are used to remove the inline style property. The attr() method sets the attribute value to empty ('').

Example 1: This example uses attr() method to remove the inline style.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to remove all inline styles
        using JavaScript/jQuery ?
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>

    <style>
        .parent {
            background: green;
        }

        .child1 {
            background: blue;
            margin: 10px;
        }

        .child2 {
            background: red;
            margin: 10px;
        }
    </style>
</head>

<body style="text-align:center;">

    <p id="GFG_UP" 
       style="font-size: 15px; 
              font-weight: bold;">
    </p>

    <div class="parent" id="parent" 
         style="color:white">
        Parent
        <div class="child child1">
            Child1
        </div>
        <div class="child child2">
            Child2
        </div>
    </div>
    <br>

    <button onclick="GFG_Fun()">
        click here
    </button>

    <p id="GFG_DOWN" 
       style="font-size: 24px; 
              font-weight: bold; color: green;">
    </p>

    <script>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let parent = document.getElementById('parent');

        up.innerHTML = "Click on the button to remove"
            + " the inline style.";

        function GFG_Fun() {
            $('#parent').attr('style', '');
            down.innerHTML = "Inline style has been removed.";
        }
    </script>
</body>

</html>

Output:

Example 2: The jQuery removeAttr() method is used to remove the inline style property. The removeAttr() method removes the value of style attribute.