Remove CSS class from element with JavaScript (no jQuery)

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.