removeData()jquery方法不起作用

Question

我认为我正在使用removeData但它似乎没有工作,这是我在开发控制台中看到的,有人可以解释我做错了吗？

我正在输出当前的数据属性值,调用removeData,然后再次输出该值,它仍然存在.

$('.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

有一些问题我想澄清以防万一其他人偶然发现它...

如果data-*元素上有HTML5 属性,则需要使用jQuery removeAttr()而不是removeData()如果要从DOM中的元素中删除它们.

例如,要从您需要使用的元素中实际删除数据属性:

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

您可以读取这样的值,$({selector}).data('fieldlength')但removeData()如果它们是页面源中存在的元素的HTML属性,则实际上不会删除它们(它只是在内存中删除它,因此如果您使用jQuery再次查询它,它似乎有被删除).

就个人而言,我认为这种行为已被打破,我确信会抓住很多人.

Answer 2

这是因为您的data源自HTML data-fieldlength属性.根据文件:

使用.removeData("name")时,如果内部数据缓存中没有该名称的属性,jQuery将尝试在元素上查找数据属性.要避免重新查询data-属性,请将名称设置为null或undefined(例如.data("name",undefined)),而不是使用.removeData().

而不是

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

你应该做

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

Answer 3

.removeData()只会从 jQuery 的内部.data()缓存中删除数据，因此元素上的任何相应data-属性都不会被删除。因此，稍后的调用data()将重新从元素的属性中检索值data-。为了防止这种情况，也可以使用.removeAttr()side.removeData()来删除该属性。data-

例子：

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

然后设置：

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