Removing CSS with jQuery to Modern Dynamic Styles

I answered a question on Stack Overflow in Portuguese about removing CSS styles with jQuery. It scored 7 upvotes. The question was typical of the era: someone had set inline styles with jQuery and needed to undo them. Sounds trivial, but the solutions revealed how we thought about dynamic styling back then.

The Then: jQuery as Style Manager

In 2015-2016, jQuery was the go-to tool for any runtime style manipulation:

// Set a style
$('.box').css('background-color', 'red');

// Remove a specific inline style
$('.box').css('background-color', '');

// Nuclear option: remove all inline styles
$('.box').removeAttr('style');

// Toggle via class
$('.box').removeClass('highlight');

// Multiple styles at once
$('.box').css({
  'background-color': '',
  border: '',
  opacity: '',
});

The problem was that $.css() only dealt with inline styles. If you set a style via .css(), the only way to “remove” it was to either clear the inline value or nuke the entire style attribute. There was no clean way to say “go back to whatever the stylesheet says.”

And the real mess started when you mixed approaches — setting some styles via .css(), some via .addClass(), and some via direct DOM manipulation. Debugging meant opening DevTools and trying to figure out which of three systems set that display: none.

The Now: Native APIs and Better Patterns

classList: The Right Way to Toggle Styles

const box = document.querySelector('.box');

// Add/remove classes (this was always the right approach)
box.classList.add('highlight');
box.classList.remove('highlight');
box.classList.toggle('highlight');
box.classList.replace('old-style', 'new-style');

classList has been available since IE10, but jQuery’s dominance meant many developers didn’t learn it until years later. It’s the cleanest way to manage visual state — styles live in CSS where they belong.

CSS Custom Properties for Dynamic Values

// Set a dynamic value
document.documentElement.style.setProperty('--box-color', 'red');

// Remove it (falls back to CSS-defined value)
document.documentElement.style.removeProperty('--box-color');

// Scoped to an element
box.style.setProperty('--local-opacity', '0.5');

Custom properties changed the game. Instead of setting inline styles directly, you set CSS variables that your stylesheet references. Removing the variable automatically falls back to the default:

.box {
  background-color: var(--box-color, white);
  opacity: var(--local-opacity, 1);
}

element.style.removeProperty()

For the cases where you genuinely need inline styles:

// Remove a specific property (clean alternative to jQuery .css('prop', ''))
box.style.removeProperty('background-color');
box.style.removeProperty('border');

// Check what's actually set inline
console.log(box.style.cssText); // only inline styles

CSSStyleSheet API for Dynamic Rules

// Create and manage stylesheets programmatically
const sheet = new CSSStyleSheet();
sheet.replaceSync('.box { background: red; }');
document.adoptedStyleSheets = [sheet];

// Update later
sheet.replaceSync('.box { background: blue; }');

// Remove entirely
document.adoptedStyleSheets = [];

This is how component libraries and frameworks manage scoped styles in 2026 — no inline styles, no class soup, just managed stylesheet objects.

What Changed

The shift was philosophical. jQuery treated CSS as something JavaScript should imperatively control. Modern patterns treat CSS as declarative and let JavaScript toggle between states. Custom properties bridged the gap — JavaScript sets values, CSS decides what to do with them.

My 2016 answer was solving the wrong problem. The question shouldn’t have been “how do I remove a style?” It should have been “why am I setting inline styles in the first place?” In 2026, the answer is almost always: use a class, use a custom property, or let your framework handle it.