removeData() jquery method not working

Question

I think I'm using removeData correctly but it doesn't seem to be working, here's what I'm seeing in the dev console, could anyone explain what I'm doing wrong?

I'm outputting the current data attribute value, calling removeData, then outputting the value again and its still there.

$('.questionList > li').eq(1).data('fieldlength')
3
$('.questionList > li').eq(1).removeData('fieldlength');
[
<li class=​"questionBox" data-createproblem=​"false" data-fieldlength=​"3" data-picklistvalues data-required=​"true" data-sfid=​"a04d000000ZBaM3AAL" data-type=​"Text">​
<div class=​"questionLabel">​Birthdate​</div>​
</li>​
]
$('.questionList > li').eq(1).data('fieldlength')
3

Answer 1

There is bit of gotcha I wanted to clarify in case anyone else stumbles upon it...

If you have HTML5 data-* attributes on an element you need to use jQuery's removeAttr() instead of removeData() if you want to remove them from the element in the DOM.

For example, to actually remove a data attribute from an element you need to use:

$({selector}).removeAttr('data-fieldlength');

You can read values like this with $({selector}).data('fieldlength') but removeData() doesn't actually remove them if they are HTML attributes on an element present in the source of the page (it just deletes it in memory, so that if you query it again with jQuery it appears to have been removed).

Personally I think this behaviour is broken and I'm sure catches a lot of people out.

Answer 2

It's because your data originates in the HTML data-fieldlength attribute. According to the docs:

When using .removeData("name"), jQuery will attempt to locate a data- attribute on the element if no property by that name is in the internal data cache. To avoid a re-query of the data- attribute, set the name to a value of either null or undefined (e.g. .data("name", undefined)) rather than using .removeData().

So instead of

$('.questionList > li').eq(1).removeData('fieldlength');

you should do

$('.questionList > li').eq(1).data('fieldlength',null);

Answer 3

.removeData() will only remove data from jQuery's internal .data() cache so any corresponding data- attributes on the element will not be removed. A later call to data() will therefore re-retrieve the value from the element's data- attribute. To prevent this, use .removeAttr() alongside .removeData() to remove the data- attribute as well.

Example:

$('div').removeData('info');
$('div').removeAttr('data-info');

Then set either:

$('div').data('info', 222);
$('div').attr('data-info', 222);