Eliminación de atributos de datos de HTML usando jQuery

Parece que no puede hacer que funcione ...Eliminación de atributos de datos de HTML usando jQuery

Tengo una página que oculta ciertos enlaces. Cuando el DOM está cargado, estoy usando jQuery para alternar algunos de esos elementos. Esto es impulsado mediante el uso de un atributo de datos de este modo:

<div class="d_btn" data-usr='48'> 
    <div class="hidden_button">

Entonces, tengo el código:

$.each($(".d_btn"), function() { 
    var btn = $(this).data('usr'); 
    if (btn == '48'){  
    $(this).children('.hidden_button').toggle(); 
    }

Lo anterior funciona todo como estaba previsto. El problema es que estoy tratando de eliminar el ususario de la clase .d_btn una vez que se evalúa la sentencia if. He intentado lo siguiente y nada funciona (es decir, después de cargar la página, la fuente sigue mostrando el atributo de datos-usr:

$(this).removeAttr("data-usr"); 

$(this).removeData("usr");

He estado trabajando en esto durante un par de horas y ahora. ..nothing! ayuda es muy apreciada!

ACTUALIZACIÓN

he intentado las sugerencias de establecer el atributo de datos a una cadena vacía, pero todavía no recibo el resultado deseado.

a Explique un poco más: La razón por la que estoy tratando de eliminar el atributo es que cuando una respuesta ajax agrega otro elemento a la página, los elementos agregados anteriormente ya tienen el botón mostrado u oculto. Tras la respuesta de AJAX, estoy llamando a la misma función una vez que se carga el DOM.

En la actualidad, cuando se añade algo a través de AJAX, cambia todos los botones (que muestran los que estaban ocultas y viceversa.) Uf ...

También estoy totalmente dispuesto a probar alternativas al enfoque . ¡Gracias!

ACTUALIZACIÓN

Bueno, la bombilla solo brilló y yo soy capaz de hacer lo que quiero hacer sólo por el uso .show() en lugar de .toggle()

De todos modos, Todavía me gustaría encontrar una respuesta a esta pregunta porque la página potencialmente podrá verificar cientos de elementos cada vez que se agregue algo - esto parece terriblemente ineficiente (incluso para una computadora, jajaja)

Fuente

2012-09-20 Angelo Chrysoulakis

Al cambiar el DOM no se afecta la fuente. Afecta al DOM, que puede ver con las Herramientas de Inspector/Desarrollador. Haga clic con el botón derecho => Ver fuente le dará la fuente original de la página, no la fuente actual como está modificado por JavaScript.

Fuente

2012-09-20 23:20:13

+1 El punto es esto. http://jsfiddle.net/VVbFG/ – undefined

Gracias - ¡eso es realmente útil! Actualicé mi publicación con información adicional. –

¿Por qué no configurar el valor de un valor aleatorio o vari vacío capaz en cambio si removeAttr no funciona ..

$(this).attr("data-usr" , ''); 

$(this).prop("data-usr" , '');

Fuente

2012-09-20 23:20:11

Gracias - He actualizado mi publicación original con alguna explicación adicional ... –

Pero cuando el usuario de datos está vacío, supongo que no se activará el bucle if ... Así que el estado del botón para ese div en particular no se cambiará. ¿Puedes construir un violín si lo que estoy pensando está mal? –

Eso es exactamente lo que pensé, pero no funciona así. Indefinido creó un violín en su respuesta anterior: jsfiddle.net/VVbFG –

Set a una cadena en blanco:

$(this).attr("data-usr", "");

Secundo lo que dijo Kolink: comprobar el DOM, no la fuente. (Chrome: Ctrl + Shift + i).

Fuente

2012-09-20 23:20:13 JCOC611

Gracias - He actualizado mi publicación original con alguna explicación adicional ... –

Como han indicado otros. Verificando la fuente solo se mostrará la fuente original sin editar para la página web. Lo que debes hacer es verificar el DOM usando herramientas de desarrollador.

Acabo de comprobar todo en el inspector de Chrome en jsfiddle here y definitivamente se está eliminando el atributo, así como los datos.

Fuente

2012-09-20 23:46:53

Gracias - ¿Entonces tal vez haya un problema con mi razonamiento? Lamentablemente, no sé cómo controlar el DOM (se ha probado Firebug y no se puede sacar ni señas de nada) ... –

En Firefox, deberías poder hacer clic derecho en el elemento de la página y seleccionar "Inspeccionar". Elemento con Firebug ". A continuación, verá el marcado de la página localizada en el elemento que seleccionó. –

Bonito -^Gracias amigo^Acabo de verificar y estás en lo correcto - se eliminó el atributo de datos. Lo que confirma mi conclusión de que era un problema con mi razonamiento. La pregunta ahora es por qué, cuando se agrega un nuevo elemento a través de AJAX y llamo a la misma función, ¿se ejecuta el ciclo en todos los elementos y todo se alterna? –

Eliminación de atributos de datos de HTML usando jQuery

Respuesta

Cuestiones relacionadas