Remove data-icon dynamically

Question

I am developing an app in JavaScript and jQuery. In the app, there is a listview (jQuery mobile) with some items.

I have made a function to remove all data-icons dynamically in the listview items, but it isn't working:

$( ".lvItem" ).each(function() {
    $(this).attr('data-icon', 'false');
    $(this).find('.ui-icon').removeClass('ui-icon-' + 'arrow-r');
});

But, if I try to change the icon dynamically, it works perfectly:

$( ".lvItem" ).each(function() {
    $(this).attr('data-icon', 'arrow-u');
    $(this).find('.ui-icon').addClass('ui-icon-' + 'arrow-u');
    $(this).find('.ui-icon').removeClass('ui-icon-' + 'arrow-r');
});

What am I doing wrong?

Answer 1

To remove an attribute use .removeAttr() like so

$( ".lvItem" ).each(function() {
   $(this).removeAttr('data-icon');
   //remember that you can access data- attributes with the data function
   //like this        
   //modify a value
   $(this).data('icon','value-1');
   //read a value
   icon = $(this).data('icon');
});