Eliminar JavaScript de clase CSS
-
Utilice
classList.remove()para eliminar la clase CSS del elemento con JavaScript -
Utilice jQuery
removeClass()para eliminar la clase CSS del elemento con jQuery
Este tutorial enseña cómo eliminar una clase CSS de un elemento con JavaScript.
Utilice classList.remove() para eliminar la clase CSS del elemento con JavaScript
La propiedad classList devuelve la lista de clases aplicadas a un elemento. Ayuda a agregar, eliminar y alternar clases CSS adjuntas a un elemento. Nos proporciona los métodos add() y remove() para agregar / eliminar clases de la classList. Usando remove(), podemos eliminar fácilmente la clase CSS de cualquier 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');
En el código anterior, usamos el selector para obtener el elemento deseado del DOM, y luego lo almacenamos en una variable para que podamos acceder a sus propiedades y modificarlas. Como queríamos eliminar la clase del elemento, usamos classList.remove() para eliminar la clase deseada. Incluso podemos eliminar varios nombres de clases al mismo tiempo proporcionando varios argumentos.
Cabe señalar que Internet Explorer no admite la propiedad classList.
Utilice jQuery removeClass() para eliminar la clase CSS del elemento con jQuery
La función removeClass() en jQuery tiene el único propósito de eliminar una clase de un elemento. Puede eliminar una sola, varias o incluso todas las clases de un elemento. Podemos eliminar la clase llamando a la función en cualquier elemento referenciado. Para eliminar todas las clases a la vez, llame a la función removeClass() sin proporcionar ningún 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');
Otra función llamada toggleClass() agrega / elimina clases de un elemento de modo que las clases que ya están presentes se eliminan, pero se agregan las clases ausentes. Ayuda a lograr los mismos resultados, pero debe usarse con precaución porque si se especifica un nombre de clase incorrecto, podríamos agregar una nueva clase.
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