Método data() Core jQuery - II

Método removeData() 

Este método sirve para eliminar un dato de un elemento y su funcionamiento es tan simple como enviar por parámetro el dato que se quiere eliminar del elemento.

$("#capa").removeData("midato")

Con esta línea habríamos eliminado el dato llamado "midato" del elemento con identificador "capa".

Ejemplo completo de los métodos data() y removeData() del Core de jQuery
Veamos un ejemplo completo del uso de estos métodos que acabamos de aprender. Se trata de una página que tiene un elemento sobre el que vamos a guardar datos. Además tiene tres botones para guardar un dato, leerlo y borrarlo. El dato que se guardará tendrá como valor lo que se haya escrito en un campo de texto que aparece también en la página. Podemos ver el ejemplo en marcha en una página aparte. Tenemos, para comenzar, un elemento de la página, que es donde vamos a guardar los pares dato-valor con data().

En esta división (elemento id="division") voy a guardar datos con la función data y luego los voy a leer.

Luego tendremos este formulario, que contiene el campo de texto así como los tres botones de los que hemos hablado.

<form name="formul">

Escribe un valor a guardar, leer o eliminar:

<input type="text" name="valor" id="valor">

<br>

<input type="button" value="guardar dato" id="guardar">

<input type="button" value="leer dato" id="leer">

<input type="button" value="eliminar dato" id="eliminar">

</form>

Ahora se trata de asignar los comportamientos a estos botones con Javascript, haciendo uso de jQuery. Este sería el script para agregar el evento click al botón de guardar datos.

$("#guardar").click(function(evento){

var valor = document.formul.valor.value;

//Esta misma línea de código se puede codificar así también con jQuery

//var valor = $("#valor").attr("value");

$("#division").data("midato",valor);

$("#division").html('He guardado en este elemento (id="division") un dato llamado "midato" con el

valor "' + valor + '"');

});