Explain Codes LogoExplain Codes Logo

Remove CSS class from element with JavaScript (no jQuery)

javascript
prompt-engineering
functions
callbacks
Alex KataevbyAlex Kataev·Mar 4, 2025
TLDR

Need to evict a class from an element asap? element.classList.remove("ClassName") in JavaScript gets the job done:

document.querySelector('.troublemaker').classList.remove('unwantedClass');

From <div class="troublemaker unwantedClass"></div>, this quick fix changes it to <div class="troublemaker"></div>. Handy for real-time style tweaks.

Addressing multiple classes

When an element has multiple classes and you only have beef with one of them, classList is your new best friend:

let diva = document.getElementById('divaElement'); diva.classList.remove('costumeChange', 'offKey');

Running this on <div id="divaElement" class="costumeChange offKey encore"></div>, the output is <div id="divaElement" class="encore"></div>.

Covering old and new tracks

Legacy browsers, bless their hearts, might not play nice with classList. For IE9 and its brethren, className is the old reliable friend:

var diva = document.getElementById('divaID'); diva.className = diva.className.replace(/\bmySolo\b/, '');

This uses regex to exactly match and replace the class name, ensuring it doesn't trip on classes with similar sounding names.

A touch of fancy coding

For readability and elegance, consider extending HTMLElement's prototype with a custom method:

// Adding a dash of sophistication to our code HTMLElement.prototype.removeClass = function(celebrity) { var soapOpera = new RegExp('(\\s|^)' + celebrity + '(\\s|$)'); this.className = this.className.replace(soapOpera, ' ').trim(); };

With this, just call diva.removeClass('mySolo'), and watch that despised class vanish.

Supporting legacy fans

In a volatile world of user agents, having fallbacks is non-negotiable. Even the universal love for classList won't excuse skipping graceful degradation:

function fanMeeting(elem, groupie) { if (elem.classList) { // VIP treatment for modern fans! elem.classList.remove(groupie); } else { // Also taking care of adoring fans with older devices elem.className = elem.className.replace(new RegExp('(?:^|\\s)' + groupie + '(?:\\s|$)'), ' ').trim(); } }

This function removes classes dependably, regardless of the user's taste in browsers.

Class manipulations, list-style

When classList ain't enough and regex feels heavy, you can transform the className string into an array, then filter out the nuisance:

function stylistChangeover(elem, diva) { let castMembers = elem.className.split(' '); let supportingCharacters = castMembers.filter(function(character) { return character !== diva; }); elem.className = supportingCharacters.join(' '); }

This gives you granular control, allowing you to cherry-pick classes to retain.

Building your style entourage

After getting rid of the trash, you might want to roll out the red carpet for some new classes:

document.querySelector('.troublemaker').classList.add('wantedClass');

Class added, no existing classes disturbed.