Remove CSS class from element with JavaScript no jQuery

Question

Could anyone let me know how to remove a class on an element using JavaScript only  Please do not give me an answer with jQuery as I can t use it  and I don t know anything about it

User · Answer

function hasClass ele cls        return ele className match new RegExp     s     cls     s           function removeClass ele cls            if  hasClass ele cls                 var reg   new RegExp     s     cls     s                   ele className ele className replace reg

User · Answer

document getElementById  whatever   className     classToKeep     With the plus sign       appending the class as opposed to overwriting any existing classes

User · Answer

I use this JS snippet code    First of all  I reach all the classes then according to index of my target class  I set className        Target   document getElementsByClassName  yourClass   1   Target className

User · Answer

It s very simple  I think   document getElementById  whatever   classList remove  className

User · Answer

Here s a way to bake this functionality right into all DOM elements   HTMLElement prototype removeClass   function remove        var newClassName           var i      var classes   this className split           for i   0  i  lt  classes length  i              if classes i      remove                newClassName    classes i                             this className   newClassName

User · Answer

The right and standard way to do it is using classList  It is now widely supported in the latest version of most modern browsers   ELEMENT classList remove  CLASS NAME       x000D   x000D  remove onclick        gt    x000D    const el   document querySelector   el    x000D    if  el classList contains  red      x000D      el classList remove  red    x000D   x000D      x000D    x000D   red   x000D    background  red x000D    x000D   lt div id  el  class  red  gt  Test lt  div gt  x000D   lt button id  remove  gt Remove Class lt  button gt  x000D   x000D   x000D    Documentation  https   developer mozilla org en DOM element classList

User · Answer

try   function removeClassName elem  name       var remClass   elem className      var re   new RegExp           name                 remClass   remClass replace re    1        remClass   remClass replace                elem className   remClass

User · Answer

div classList add  foo    div classList remove  foo      More at https   developer mozilla org en-US docs Web API element classList

User · Answer

Edit  Okay  complete re-write  It s been a while  I ve learned a bit and the comments have helped   Node prototype hasClass   function  className        if  this classList            return this classList contains className         else           return  -1  lt  this className indexOf className              Node prototype addClass   function  className        if  this classList            this classList add className         else if   this hasClass className             var classes   this className split               classes push className           this className   classes join                 return this      Node prototype removeClass   function  className        if  this classList            this classList remove className         else           var classes   this className split               classes splice classes indexOf className   1           this className   classes join                 return this        Old Post  I was just working with something like this  Here s a solution I came up with        Some browsers don t have a native trim   function if  String prototype trim        Object defineProperty String prototype  trim             value  function                 return this replace    s   s   g                         writable false          enumerable false          configurable false              addClass      first checks if the class name already exists  if not  it adds the class  Object defineProperty Node prototype  addClass         value  function c            if this className indexOf c  lt 0                this className this className      c                    return this             writable false      enumerable false      configurable false        removeClass      removes the class and cleans up the className value by changing double     spacing to single spacing and trimming any leading or trailing spaces Object defineProperty Node prototype  removeClass         value  function c            this className this className replace c     replace           trim            return this             writable false      enumerable false      configurable false       Now you can call myElement removeClass  myClass    or chain it  myElement removeClass  oldClass   addClass  newClass

User · Answer

document getElementById  MyID   className       document getElementById  MyID   className replace   bMyClass b         where MyID is the ID of the element and MyClass is the name of the class you wish to remove     UPDATE   To support class names containing dash character  such as  My-Class   use  document getElementById  MyID   className     document getElementById  MyID   className      replace new RegExp         s     My-Class          s

User · Answer

var element   document getElementById  example id    var remove class    example class    element className   element className replace       remove class      replace remove class

[javascript] Remove CSS class from element with JavaScript (no jQuery)

Examples related to javascript

Examples related to html

Examples related to css