Remover a classe CSS do elemento com JavaScript (sem jQuery) [duplicado]

[[2] esta pergunta já tem uma resposta aqui:

Alguém me pode dizer como remover uma classe num elemento usando apenas JavaScript? Por favor, não me dês uma resposta com o jQuery, porque não posso usá-la, e não sei nada sobre isso.

Author: ЯegDwight, 2010-01-28

13 answers

A forma correcta e normal de o fazer é usando classList. Ele é agora amplamente suportado na última versão dos navegadores mais modernos:

ELEMENT.classList.remove("CLASS_NAME");

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

 783
Author: Paul Rouget, 2017-02-03 23:48:05
document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

Onde MyID está o ID do elemento e a minha classe é o nome da classe que deseja remover.


Actualização: Para suportar nomes de classes que contenham caracteres de traço, como" minha-classe", use

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');
 504
Author: ЯegDwight, 2016-10-11 13:57:46

Aqui está uma maneira de assar esta 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;
}
 56
Author: Matthew, 2011-08-08 00:49:05
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,' ');
        }
    }
 40
Author: Keith Rousseau, 2010-01-28 15:45:35
div.classList.add("foo");
div.classList.remove("foo");

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

 31
Author: joseconstela, 2013-06-17 22:45:21

Editar

Está bem, volta a escrever. Já passou algum 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;
};


Antigo Posto
Estava a trabalhar com uma coisa destas. Eis uma solução que encontrei...
// 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 podes ligar.myElement.removeClass('myClass')

Ou acorrentá-lo: myElement.removeClass("oldClass").addClass("newClass");

 26
Author: Duncan, 2014-05-16 20:41:48
É muito simples, acho eu.
document.getElementById("whatever").classList.remove("className");
 15
Author: LivinKalai, 2013-08-23 16:10:40

Tenta:

function removeClassName(elem, name){
    var remClass = elem.className;
    var re = new RegExp('(^| )' + name + '( |$)');
    remClass = remClass.replace(re, '$1');
    remClass = remClass.replace(/ $/, '');
    elem.className = remClass;
}
 9
Author: scunliffe, 2010-01-28 15:47:23
var element = document.getElementById('example_id');
var remove_class = 'example_class';

element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
 4
Author: Tornike, 2013-11-09 16:55:03

Todas estas respostas são muito complicadas, tente

var string = "Hello, whats on your mind?";
var new_string = string.replace(', whats on your mind?', '');

O resultado seria um retorno da cadeia

Hello
Muito fácil. Os créditos vão para jondavidjohn remover a parte do texto no Javascript
 2
Author: aaa, 2017-05-23 11:47:32

Uso este código de excerto JS:

Em primeiro lugar, chego a todas as classes, depois, de acordo com o índice da minha classe alvo, estabeleço o nome da classe = "".

Target = document.getElementsByClassName("yourClass")[1];
Target.className="";
 1
Author: Amir, 2014-07-02 15:20:53

Também há$.toggleClass, $.addClass, e $.removeClass Para documentação, dê uma olhada em http://api.jquery.com/toggleClass/.

Dê uma olhada neste exemplojsFiddle para vê-lo em ação.

 -4
Author: Ehtesh Choudhury, 2013-03-14 05:39:51
document.getElementById("whatever").className += "classToKeep";

Com o sinal de mais ( ' + ' ) a adicionar a classe em vez de substituir quaisquer classes existentes

 -5
Author: les, 2013-12-16 01:18:39