clubmate.fi

Remove and add class names from elements using pure JavaScript

CSS class names can be removed or added using the classList method, or they can modified straight with the className property.

Using the classList method

classList is pretty smart and the most modern system of manipulating CSS class names in elements via JavaScript.

Remove class names

Here’s how to remove a single class name:

const element = document.getElementById('foo')
element.classList.remove('bar')

Multiple class names can be removed by passing more parameters to the remove method:

element.classList.remove('bar', 'baz')

Or remove a given class name from all the elements at the same time; in this example case I’m removing .open class from an accordion element:

const accordionItems = [...document.getElementsByClassNme('accordion-item')]

accordionItems.forEach(accordionItem => {
  accordionItem.remove('open')
})

Adding class names

Adding class names isn’t much different:

const element = document.getElementById('foo')

element.classList.add('my-class')

All the classList methods

I think remove and add are the most used methods of the classList class, but here are all of them, with brief examples:

remove()

Removes a class from an element’s list of classes. If class does not exist in the element's list of classes, it will not throw an error or exception.

add()

Adds a class to an element’s list of classes. If class already exists in the element’s list of classes, it will not add the class again.

toggle()

Toggles the existence of a class in an element’s list of classes. Very useful when handling clicks for example:

const button = document.getElementById('button')
button.addEventListener('click', event => {
  event.target.classList.toggle('visible')
})

contains()

Checks if an element’s list of classes contains a specific class

if (element.classList.contains('my-class')) {
  // Do stuff...
} else {
  // Do other stuff...
}

Browser support

classList is supported from IE10 on, Opera Mini is not supported. See support table at caniuse.com

The className property

In HTML we can just say <span class='foo'>, but in JavaScript the word "class" is a reserved word, so it has to be called className instead:

const element = document.getElementById('foo')
element.className = 'my-class'

Note: that’ll override the existing class, the following appends it to the old class name, it’s just like eny variable:

const element = document.getElementById('foo')
element.className += ' my-class'

Manipulate class names in NodeList

NodeList is an array-like object, but not an array, per se. But for loop works on it no problem:

const element = document.getElementByTagName('div')

for (var i = 0; i < element.length; i++) {
  element[i].className += ' line-numbers'
}

Few helper functions for manipulating classes

I’ve come across the following helpful functions, see the sources for more info.

Remove a CSS class using className and regex

The double escaped \\b in the regex means a word boundary, read more about the regex short hand character classes.

function removeClass(className, element) {
  let cn = element.className
  const regexPattern = new RegExp('\\s?\\b' + className + '\\b', 'g')
  cn = cn.replace(regexPattern, '')
  element.className = cn
}

Or same but more tighter, using non-capturing groups:

const removeClass = (className, element) => {
  element.className = element.className.replace(
    new RegExp('(?:^|\\s)' + className + '(?!\\S)'),
    ''
  )
}

Source

Add class using classList

const addClass = function (_element, _classes) {
  let classList = _element.classList
  let _len

  for (let _i = 0, _len = _classes.length; _i < _len; _i++) {
    const item = _classes[_i]
    if (classList.length <= _len) {
      classList.add(item)
    } else {
      classList.remove(item)
    }
  }

  return _element
}

Source

Add class Using className function

function addClass(className, element) {
  const cn = element.className

  // Test for existence
  if (cn.indexOf(className) !== -1) return

  // Add a space if the element already has class
  if (cn !== '') className = ' ' + className

  element.className = cn + className
}

Source