Agregar y eliminar clases con JQuery

El manejo del DOM de aplicaciones web para agregar y eliminar clases con JQuery con addClass y removeClass es muy fácil.

Podemos agregar clases dentro de la propiedad de los elementos HTML, realizando la manipulación desde el cliente.

Todo el proceso lo realizare en una aplicación web ASP desde visual Studio.

Agregar elementos HTML

En una página aspx agregamos los elementos siguientes.

<input type="text" id="txtNombre" name="txtNombre" />
<br />
<a id="linkAdd" onclick="FuncionAdd();">Agregar clase</a>
<br />
<a id="linkDel" onclick="FuncionDel();">Eliminar clase</a>

• Un campo de texto al que le agregare una clase (inicialmente no tiene clases).
• Elemento a que ejecutara una función en JavaScript para agregar la clase.
• Otro elemento a que ejecutara la función de eliminar clases desde JavaScript.

En este ejemplo agregaremos clases en un campo de texto, aunque es posible utilizar otro elemento HTML.

Agregar funciones JavaScript

Utilizare un archivo JavaScript externo y agregare el enlace en el archivo aspx, en un post anterior vimos cómo hacerlo.

También puedes colocar las funciones JavaScript incrustado en el archivo aspx, es recomendable que sea externo.

Agregamos las funciones con los nombres que hacen mención los elementos a:

function FuncionAdd() {
    $("#txtNombre").addClass("required");
}

function FuncionDel() {
    $("#txtNombre").removeClass("required");
}

• La FuncionAdd agrega la clase de nombre “required” mediante el método addClass().
• FuncionDel elimina las clases de nombre “required” con el método removeClass().
• Con el signo de pesos $ especificamos el nombre del elemento a agregar o eliminar clases.

Podría interesarte Ejecutar funciones JavaScript con onclick ASP.Net  

Ejecución

Ejecutemos la aplicación, podemos observar desde el inspector de código del explorador lo siguiente:

Damos clic en el botón Agregar clase, verificamos en el inspector de código el resultado:

Observamos que se crea la propiedad class en el elemento y se agrega el nombre especificado de la clase.

Ahora seleccionemos el botón Eliminar clase y verificamos el resultado:

La propiedad class no es removido, sin embargo, el nombre de la clase sí; el elemento ya no es afectado por la clase.

Al agregar nuevamente la clase no se genera otra propiedad class, por lo tanto, no genera conflicto.