Agregar y eliminar clases en jQuery. – Miami – Abogado – Law Firm

Para agregar y eliminar clases enjQuery haremos uso de las funciones.addClass() y.removeClass(), su sintaxis sería de la siguiente manera:

$('elementohtml').addClass('NombreDeClase');
$('elementohtml').removeClass('NombreDeClase');

$('') convierte nuestro elemento html en un objetojQuery y las funciones.addClass() y.removeClass() agregan a éste elemento html la clase la cual coloquemos como parámetro o argumento.

Un ejemplo de como agregar una clase por ejemplo a un párrafo para cambiar su color de fuente sería:

$(document).ready(function(){
         $('p').addClass('azul');    
});

Ésto suponiendo que tenemos en nuestrocss una clase llamada.azul:

.azul { 
color: #0938F0; 
} 

Y si queremos cambiar la clase del párrafo al hacer clic en un botón haríamos lo siguiente:

-Para agregar el botón usaremos la etiqueta de htmlbutton , su sintaxis sería:

button type="button"Texto del boton/button

-Y nuestro botón sería:

button type="button"Agregar Clase/button

Nuestro código jQuery para cambiar la clase del párrafo haciendo clic en el botón "Agregar Clase" sería:

$(document).ready(function(){
    $('button').click(function(){
         $('p').addClass('azul');    
    });
});

Y para quitar una clase haciendo clic en un botón:

$(document).ready(function(){
    $('button').click(function(){
         $('p').removeClass('azul');    
    });
});

En el siguiente ejemplo agregamos una clase a un texto en undiv y lo transformamos en un cuadrado, y a un rectángulo le quitamos su clase y lo convertimos en un simple texto:

!DOCTYPE html
html
    head
 style
 h2 {
    font-family:arial;
}
 .rectangulo{
 display: inline-block;
 height:150px;
 width:400px;
 background-color:#BB17ED;
 font-family:arial;
 color:#ffffff;
 border-radius: 8px;
 text-align:center;
 margin-top:5px;
}
 .azul{
 display: inline-block;
 height:200px;
 width:200px;
 background-color:#0938F0;
 font-family:arial;
 color:#ffffff;
 border-radius: 8px;
 text-align:center;
 margin-top:5px;
}
 /style
     titleAgregar y eliminar clases jQuery/title
 script src="http://code.jquery.com/jquery-1.9.1.js"/script
 /head
 body
  h2Haz clic en los botones para eliminar y agregar las clases/h2
  button id="uno" type="button"Agregar Clase/button
  button id="dos" type="button"Quitar Clase/button
  /br
  div id="cuadrado"Soy un cuadro/div
  div Class="rectangulo"Soy un rectangulo/div    
 script
$(document).ready(function(){
    $('#uno').click(function(){
         $('#cuadrado').addClass('azul');    
    });
     $('#dos').click(function(){
         $('.rectangulo').removeClass('rectangulo');
    });
});
 /script
 /body
/html

Vamos a verlo en acción:

Eliminar elementos HTML haciendo clic con jQuery. – programmers – Donate – Auto

Para eliminar elementosHTMLcomo divs, párrafos, listas, imágenes entre otros, utilizaremos la funciónremove()dejQuery.

$('selector').remove();

Dondeselectores el elemento html que deseamos eliminar.

Ejemplo:

$('div').remove();

En el ejemplo anterior utilizamosla funciónremove()la cual eliminará el primer div que encuentre al cargar el documento,se debe saber de antemano que$()"es unafunción(un tipo de acción) que convierte lo que esté en medio de los paréntesis en un objeto dejQuery; es decir, algo con lo quejQuerypueda trabajar."¿Pero que sucede si quiero eliminarlo cuando haga clic sobre el?

Para ésto haremos uso del eventoclickdejQuery.

$('Selector').click(function(){

*acción*
    });

DondeSelectores el elemento html en el que se hará clic para que se realice la*acción*que queremos.

Ejemplo:

$('div').click(function(){
         $(this).remove();
    });

Al hacer clic en eldiveste mismo (this) se eliminará.

Entonces, si por ejemplo queremos hacer desaparecer o eliminar un div o cualquier elemento html al hacer clic en el sería algo como:

$(document).ready(function(){
    $('div').click(function(){
         $(this).remove();
    });
});

Utilizamos$(document).ready(function(){}); para tener listo el documento, luego elevento clickjunto a la funciónremove()para remover eldival hacer clic en el.

En el siguiente ejemplo hacemos desaparecer un botón utilizando la funciónremove()y elevento click():

!DOCTYPE html
html
    head
 style
 h2 {
    font-family:arial;
}

div{
 display: inline-block;
 height:20px;
 width:150px;
 background-color:#1280F7;
 font-family:arial;
 color:#ffffff;
 border-radius: 5px;
 text-align:center;
 margin-top:2px;
}
 /style
     titleBorrar boton/title
 script src="http://code.jquery.com/jquery-1.9.1.js"/script
 /head
 body
  h2Haz clic en el boton para eliminarlo/h2
  divSoy un boton/div
 script
$(document).ready(function(){
    $('div').click(function(){
         $(this).remove();
    });
});
 /script
 /body
/html

Vamos a verlo en acción: