Adding or removing a class from an HTML element with JavaScript

Published on 2020-05-23 • Modified on 2020-05-23

In this snippet, we will see how to add or remove a class from an HTML element with JavaScript. It can be done with the classList property of the HTLM element we want to alter. In the following demo, we will remove or add the btn-primary class from the button it contains it or not. In this case, we could also use the toggle function.

---

/**
 * I am using a JavaScript module to isolate the code of each snippet.
 * In fact it's a Vue.js mixin. Take the code called by the mounted()
 * or the snippetXX() function.
 */
export default {
  methods: {
    snippet92 () {
      if (this.$refs.button92.classList.contains('btn-primary')) {
        this.$refs.button92.classList.toggle('btn-primary')
      } else {
        this.$refs.button92.classList.add('btn-primary')
      }

      // or this.$refs.button92.classList.toggle('btn-primary')
    }
  }
}

Toogle the "btn-primary" class of this button

---

 More on Stackoverflow   Read the doc  Random snippet

  Work with me!

---