jQuery

jQuery addClass() y removeClass(): Añadir y eliminar clases del DOM

Con jQuery addClass() y removeClass() podemos añadir o eliminar clases a los elementos del DOM de una página web. Hasta ahora habíamos visto una serie de efectos con los que eliminábamos, vaciábamos, añadíamos HTML o modificábamos los estilos CSS.

Estas son las funciones de las que hablo: jQuery remove(), jQuery empty(), jQuery html() y jQuery animate(), jQuery css(), jQuery attr(), height() y width().

Según la documentación oficial de addClass():

jQuery addClass() añade una o más clases a los elementos seleccionados

Y siguiendo la documentación oficial de removeClass():

jQuery removeClass() elimina una, varias o todas las clases de los elementos seleccionados

Sintaxis de jQuery addClass()

Os detallo la sintaxis de esta función de jQuery para añadir clases.

$(elemento).addClass(nombreClase,funcion(index,oldclass))

Os explico los parámetros disponibles:

elemento (obligatorio): Objeto al cual queremos añadir una o varias clases.
nombreClase (obligatorio): Nombre de la clase existente que queremos asignar.
funcion (opcional): Al usar la Función callback por defecto nos devuelve estos valores: index con el número de posición del elemento en el DOM, y oldclass con la clase actual del elemeto.

Sintaxis de jQuery removeClass()

La sintaxis para eliminar clases de los elementos es la siguiente:

$(elemento).removeClass(nombreClase,funcion(index,claseactual))

Y repaso los parámetros:

elemento (obligatorio): Objeto del cual queremos eliminar una o varias clases.
nombreClase (obligatorio): Nombre de la clase existente que queremos asignar.
funcion (opcional): Al usar la función por defecto nos devuelve estos valores de las clases a eliminar: index con el número de posición del elemento en el DOM, y claseactual con la clase actual del elemeto.

Ejemplos de jQuery addClass() y removeClass()

Vamos a comenzar a añadir y eliminar clases a elementos de una web con este primer ejemplo:

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#boton01").click(function(){
  $("#parrafo").addClass("rojo");
 });
 $("#boton02").click(function(){
  $("#parrafo").addClass("rojo grande26");
 });
 $("#boton03").click(function(){
  $("#parrafo").removeClass("rojo");
 });
 $("#boton04").click(function(){
  $("#parrafo").removeClass("rojo grande26");
 });
});
</script>

En este código superior de jQuery podemos ver 4 casos diferenciados:

Cuando se haga click en el botón con id ‘boton01‘ añadiremos al párrafo con id ‘parrafo‘ el estilo o clase ‘rojo‘.
En el segundo caso al clickar en el botón con id ‘boton02’ añadiremos al párrafo con id ‘parrafo‘ 2 estilos, que son: ‘rojo‘ y ‘grande26‘.
En el tercer botón al hacer click en el botón con id ‘boton03‘ se eliminará la clase ‘rojo‘ del párrafo con id ‘parrafo‘.
Y al ser clickado el cuarto botón elimimanos las clases ‘rojo‘ y ‘grande26‘ del párrafo con id ‘parrafo‘.

El código CSS, del párrafo y de los botones es el siguiente:

<!-- css del ejemplo -->
<style type="text/css">
    .rojo { color: red; }
    .grande26 {font-size: 26px;}
</style>

<p id="parrafo">
Cuando se haga click en los botones se realizarán asignaciones o eliminaciones de estilos en este párrafo.
</p>

<input type="button" name="boton01" id="boton01" value="Asignar color rojo">
<input type="button" name="boton02" id="boton02" value="Asignar texto rojo y tamaño 26px">
<input type="button" name="boton03" id="boton03" value="Eliminar estilo color rojo">
<input type="button" name="boton04" id="boton04" value="Eliminar estilo color rojo y el tamaño 26px"><br><br>

Ejemplos de jQuery addClass() y removeClass() usando funciones

En este segundo ejemplo vamos a ver cómo realizar la eliminación o asignación de estilos usando las funciones estilo callback.

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){
  $("#boton01").click(function(){
   $( "p[id=parrafo]" ).removeClass(function(index, currentClass){
    alert("Índice del elemento: " + index + " con la clase: " + currentClass);
   });
  });
  
  $("#boton02").click(function(){
   $( "p[id=parrafo]" ).addClass(function(index, currentClass){
    alert("Índice del elemento: " + index + " con la clase: " + currentClass);
    if (index == 0) {currentClass= "rojo";}
     else{currentClass= "grande26";}
    return currentClass;
   });
  });
 });
 </script>

Os explico los 2 casos:

En la primera detección del click del boton con id ‘boton01‘ eliminamos las clases asociadas a los párrafos con id «parrafo«, además saco un alert avisando del número del párrafo con id ‘parrafo‘ y su clase en el DOM.
En el segundo click del boton con id ‘boton02‘ añadimos al primer elemento la clase ‘rojo‘ y al segundo ‘grande26‘, , además saco un alert avisando del número del párrafo con id ‘parrafo‘ y su clase en el DOM.

El código CSS, del párrafo y de los botones es el siguiente:

<!-- css del ejemplo -->
<style type="text/css">
.rojo { color: red; }
.grande26 {font-size: 26px;}
.pequeno10 {font-size: 10px;}
</style>

<p id="parrafo" class="pequeno10">
Este primer párrafo tiene tamaño de caracter de 10px.
</p>
<p id="parrafo" class="rojo">
Este segundo párrafo es de color rojo.
</p>

<input type="button" name="boton01" id="boton01" value="Eliminar clases de los 2 párrafos">
<input type="button" name="boton02" id="boton02" value="Añadir color rojo al párrafo 1 y 26px de caracter al párrafo 2">