Remover atributos con jQuery

Explicamos como remover con jQuery los atributos relacionados a los elementos que forman parte del conjunto combinado.

En los dos últimos artículos de nuestro manual de jquery hemos venido realizando prácticas con el comando “attr()” de jQuery, aprendimos como obtener valores y asignarlos con cualquiera de sus dos variantes, ahora toca el turno de estudiar como eliminar atributos mediante un nuevo comando.

Función removeAttr()

Para eliminar un atributo perteneciente a alguno de los elementos que conforman nuestro DOM, jQuery ofrece la función “removeAttr()” cuya sintaxis es bastante sencilla y fácil de aprender, simplemente hay que recordar la palabra “remover” en inglés y añadirla a la abreviación “Attr” que hemos venido utilizando para atributo.

Esta función quita un atributo el cual es especificado mediante un parámetro que se manda con la llamada, este parámetro debe ser una cadena con el nombre del atributo a remover y una vez dado la función nos regresará un conjunto envuelto con el atributo eliminado.

Hay que tener en cuenta que al eliminar un atributo no estamos eliminando la propiedad correspondiente del elemento de JavaScript DOM, aunque si puede ocasionar que su valor cambie. Por ejemplo, la eliminación de un atributo de solo lectura de un elemento causaría que el valor de la propiedad ReadOnly del elemento cambie de “true” a “false”, pero la propiedad no es removida del elemento.

Vamos a analizar este ejemplo:

<input id="campo" type="text" disabled="disabled" value="No puedes editarlo" />
<button id="activar">Activar</button>
<script>
jQuery("#activar").click(function () {
  jQuery("#campo").removeAttr("disabled").focus().val("Ahora si lo puedes editar");
});
</script>

En él podemos ver como aplicar la función, una vez mostrado en el navegador veremos que al dar clic en el botón el campo del formulario se podrá editar, se cambia el atributo pero la propiedad no es removida únicamente cambia su valor.

Prácticas con los atributos

Digamos que queremos hacer que todos los enlaces en nuestro sitio Web que apunten a un dominio externo se abran en una ventana nueva. Esto es bastante fácil si tenemos el control total sobre el lenguaje y estructura de nuestro sitio, basta con agregar el valor de “_blank” al atributo “target” como se muestra aquí:

<a href="http://paginaexterna.com" target="_blank">Link externo</a>

Eso funcionaría a la perfección, pero si estamos ejecutando un gestor de contenidos o una wiki, donde los usuarios finales podrán añadir contenido, y no podemos depender de ellos para que añadan el atributo target = “_blank” a todos los externos enlaces, ¿Qué es lo que debemos hacer?.

En primer lugar, debemos de tratar de determinar lo que queremos, queremos que todos los enlaces cuyo atributo “href” comienza con “http://” se abran en una ventana nueva, lo cual como hemos determinado se puede hacer estableciendo el valor del atributo de destino como “_blank”.

Podemos usar las técnicas que hemos aprendido en estos últimos artículos para hacer esto de forma concisa:

jQuery("a[href^=http://]").attr("target","_blank");

Con esto seleccionamos todos los enlaces con un atributo “href” comenzando con “http://” (lo que indica que la referencia es externa), después agregamos el atributo “target” con el valor “_blank” y listo, misión cumplida, hemos logrado agregar este atributos a todos los elementos de nuestro documento que cumplen con la condición, y todo con una sola línea de código.

Otro excelente uso de la funcionalidad de atributo en jQuery es que nos ayuda a resolver un problema muy recurrente con las aplicaciones web, el temido doble envío de los datos. Este es un problema común en las aplicaciones web que ocurre por la latencia (retardo) de los envíos de formularios, lo que ofrece a los usuarios la oportunidad de pulsar el botón de enviar varias veces, causando toda clase de problemas por el código del lado del servidor.

Para nuestra solución, vamos a deshabilitar el botón de envío después de su primera llamada, de esta forma los usuarios no tendrán la oportunidad de hacer clic en el botón de enviar más de una vez, en vez de esto obtendrán una indicación visual y los botones aparecerán deshabilitados.

jQuery("form").submit(function() {
   jQuery(":submit",this).attr("disabled", "disabled");
});

Lo que hacemos es que una vez que se da la orden de “submit” en nuestro formulario, la función toma todos los botones de nuestro formulario con el selector “:submit” y los desactiva modificando agregando el atributo “disabled”, con esta solución tan sencilla podemos ahorrarnos unos cuantos dolores de cabeza del lado del servidor y mantener nuestros datos más controlados.