Blog
Eliminar y agregar clases con jQuery
- Publicado por: admin
- Categoría: Blog css Java Script jQuery

En este tutorial aprenderemos a eliminar y agregar clases con jQuery utilizando las funciones addClass y removeClass. Esto nos puede beneficiar en muchas ocasiones, como por ejemplo cuando queremos manipular muchas propiedades CSS de una etiqueta.
¿Cómo eliminar y agregar clases con jQuery?
Para realizar esto debemos incluir la librería de jQuery, en nuestro caso vamos a utilizar las que nos ofrece google de manera online. Luego vamos a definir dos clases en CSS las cuales representan a dos cuadrados de distintos colores y tamaños que vamos utilizar con las funciones addClass y removeClass de jQuery como se muestra en el siguiente ejemplo:
<!DOCTYPE html> <html> <head> <title>Eliminar y agregar clases con jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> .cuadrado-rojo-chico{ width:200px; height: 200px; background: red; } .cuadrado-verde-grande{ width:400px; height: 400px; background: green; } </style> </head> <body> <div id="cuadrado" class="cuadrado-rojo-chico"></div> <button type="button" onclick="cambiarRojoChico()">Rojo chico</button> <button type="button" onclick="cambiarVerdeGrande()">Verde grande</button> <script> function cambiarVerdeGrande(){ // Elimino la clase de color rojo y tamaño chico $('#cuadrado').removeClass('cuadrado-rojo-chico'); //Agrego lla nueva clase de color verde y tamaño grande $('#cuadrado').addClass('cuadrado-verde-grande'); } function cambiarRojoChico(){ // Hago lo contrario que en el caso anterior $('#cuadrado').removeClass('cuadrado-verde-grande'); $('#cuadrado').addClass('cuadrado-rojo-chico'); } </script> </body> </html>
Simplemente al presionar los botones vamos a ver el resultado de eliminar y agregar una clase en jQuery, cambiando así el color y tamaño del cuadrado.
Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo eliminar y agregar clases con jQuery. Ante cualquier problema no duden en dejar un comentario.