El método removeClass() es un método incorporado en jQuery que se usa para eliminar uno o más nombres de clase del elemento seleccionado.
Sintaxis:
$(selector).removeClass(class_name, function(index, current_class_name))
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- class_name: es un parámetro opcional que se usa para especificar el nombre de la clase (una o más clases) para eliminar. Múltiples nombres de clases separados por espacios.
- función: es un parámetro opcional y devuelve uno o más nombres de clase que deben eliminarse.
- índice: este parámetro se utiliza para devolver el índice del elemento.
- current_class_name: este parámetro devuelve el nombre de clase de los elementos seleccionados.
Valor devuelto: este método devuelve el elemento seleccionado con el nombre de clase eliminado especificado.
Los siguientes ejemplos ilustran el método removeClass() en jQuery:
Ejemplo 1:
<html>
<head>
<title>The removeClass Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("p").click(function() {
$("p").removeClass("GFG");
});
});
</script>
<style>
.GFG {
font-size: 120%;
color: green;
font-weight: bold;
font-size: 35px;
}
div {
width: 50%;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- click on any paragraph and see the change -->
<p class="GFG">Welcome to</p>
<p class = "GFG">GeeksforGeeks</p>
</div>
</body>
</html>
Salida:
Antes de hacer clic en el párrafo: 
Después de hacer clic en el párrafo:
Ejemplo 2: Este ejemplo no contiene parámetro. Esto eliminará todas las clases del elemento seleccionado.
<!DOCTYPE html>
<html>
<head>
<title>The removeClass Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("p").click(function() {
$("p").removeClass();
});
});
</script>
<style>
.GFG {
font-size: 120%;
color: green;
font-weight: bold;
font-size: 35px;
}
div {
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- click on any paragraph and see the change -->
<p class="GFG">Welcome to </p>
<p class="GFG">GeeksforGeeks!</p>
</div>
</body>
</html>
Salida:
Antes de hacer clic en el párrafo:
Después de hacer clic en el párrafo:
Artículos relacionados:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA