html - Remover classe CSS de um elemento com JavaScript (sem jQuery)

Alguém poderia me informar como remover uma classe de um elemento usando apenas JavaScript? Por favor, não me dê uma resposta com jQuery, pois não posso usá-lo e não sei nada sobre ele.

Resposta #1

A maneira correta e padrão de fazer isso é usando classList. Agora ele é amplamente suportado na versão mais recente da maioria dos navegadores modernos:

ELEMENT.classList.remove("CLASS_NAME");

remove.onclick = () => {
  const el = document.querySelector('#el');
  el.classList.remove("red");
}

.red {
  background: red
}

<div id='el' class="red"> Test</div>
<button id='remove'>Remove Class</button>

Documentação: https://developer.mozilla.org/en/DOM/element.classList

Resposta #2

document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

onde MyID é o ID do elemento e MyClass é o nome da classe que você deseja remover.

ATUALIZAÇÃO: Para suportar nomes de classe contendo o caractere traço, como "My-Class", use

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');

Resposta #3

Aqui está uma maneira de incorporar essa funcionalidade em todos os elementos DOM:

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName;
}

Resposta #4

div.classList.add("foo");
div.classList.remove("foo");

Mais em https://developer.mozilla.org/en-US/docs/Web/API/element.classList

Resposta #5

Tente isto:

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,' ');
  }
}

Resposta #6

Editar

Ok, reescrita completa. Faz um tempo, aprendi um pouco e os comentários ajudaram.

Node.prototype.hasClass = function (className) {
    if (this.classList) {
        return this.classList.contains(className);
    } else {
        return (-1 < 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;
};

// 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)<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
});

Agora você pode chamar myElement.removeClass('myClass')

ou encadeie: myElement.removeClass("oldClass").addClass("newClass");

Resposta #7

É muito simples, eu acho.

document.getElementById("whatever").classList.remove("className");

Resposta #8

tente :

function removeClassName(elem, name){
    var remClass = elem.className;
    var re = new RegExp('(^| )' + name + '( |$)');
    remClass = remClass.replace(re, '$1');
    remClass = remClass.replace(/ $/, '');
    elem.className = remClass;
}