Remover classe CSS JavaScript
-
Use
classList.remove()para remover classe CSS do elemento com JavaScript -
Use jQuery
removeClass()para remover classe CSS do elemento com jQuery
Este tutorial ensina como remover uma classe CSS de um elemento com JavaScript.
Use classList.remove() para remover classe CSS do elemento com JavaScript
A propriedade classList retorna a lista de classes aplicadas a um elemento. Ajuda adicionar, remover e alternar classes CSS anexadas a um elemento. Ele nos fornece os métodos add() e remove() para adicionar / remover classes da classList. Usando remove(), podemos facilmente remover a classe CSS de qualquer elemento.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="delftstack">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="delftstack">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="delftstack">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.delftstack {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
var div = document.getElementById('delftstack');
div.classList.remove('delftclass');
No código acima, usamos o seletor para obter o elemento desejado do DOM, e então o armazenamos em uma variável para que possamos acessar suas propriedades e modificá-las. Como queríamos remover a classe do elemento, usamos classList.remove() para remover a classe desejada. Podemos até remover vários nomes de classes ao mesmo tempo, fornecendo vários argumentos.
Deve-se observar que o Internet Explorer não oferece suporte à propriedade classList.
Use jQuery removeClass() para remover classe CSS do elemento com jQuery
A função removeClass() em jQuery tem o único propósito de remover uma classe de um elemento. Ele pode remover um único, vários ou até mesmo todas as classes de um elemento. Podemos remover a classe chamando a função em qualquer elemento referenciado. Para remover todas as classes de uma vez, chame a função removeClass() sem fornecer nenhum argumento.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="delftstack">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="delftstack">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="delftstack">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.delftstack {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
$('#removeme').removeClass('admin');
Outra função chamada toggleClass() adiciona / remove classes de um elemento de forma que as classes que já estão presentes sejam removidas, mas as classes ausentes sejam adicionadas. Ajuda a obter os mesmos resultados, mas deve ser usado com cautela, porque se um nome de classe errado for especificado, podemos adicionar uma nova classe.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn