Remove Inline Styles Completely Using jQuery

This guide explains how to completely remove all inline styles from HTML elements using jQuery. While jQuery offers methods to alter or empty individual style rules, stripping inline styles entirely requires targeting the HTML attribute directly. Below, you will learn the most efficient method to clear the style attribute, understand how it works across single or multiple elements, and see why it is superior to resetting individual CSS properties.

The Most Effective Method: .removeAttr('style')

Inline styles are stored within an element's HTML style attribute (e.g., <div style="color: red; margin: 10px;">). To remove every inline style completely at once, the best approach is to delete the style attribute using jQuery's .removeAttr() method.

// Target by ID
$('#targetElement').removeAttr('style');

// Target by class or tag
$('.my-elements').removeAttr('style');

When this runs, jQuery removes the style attribute entirely from the DOM node. The element reverts to inheriting styles defined strictly in external or internal stylesheets (.css files or <style> blocks).

Why .css() Is Not Ideal for Complete Removal

A common mistake is attempting to clear styles by setting properties to empty strings with .css():

// This only removes specific styles, not all of them
$('#targetElement').css('color', '');

To remove all styles this way, you would have to manually specify every applied CSS property. Even if you clear known properties, an empty style="" attribute often remains on the element. Using .removeAttr('style') is a one-line solution that guarantees complete removal of all inline styles without needing to know which styles were applied.

Practical Example

Consider the following HTML markup:

<div id="banner" style="background-color: navy; color: white; padding: 20px;">
  Announcement Box
</div>
<button id="clearBtn">Remove Inline Styles</button>

To clear the inline styles upon clicking the button:

$(document).ready(function() {
  $('#clearBtn').on('click', function() {
    $('#banner').removeAttr('style');
  });
});

After the button is clicked, the resulting HTML becomes clean:

<div id="banner">
  Announcement Box
</div>