jquery - 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​&lt;/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起源于 HTMLdata-fieldlength属性。根据文档：

使用 .removeData("name") 时，如果内部数据缓存中没有该名称的属性，jQuery 将尝试定位元素上的 data- 属性。为避免重新查询 data- 属性，请将 name 设置为 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()并列.removeData()删除该data-属性。

例子：

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

然后设置：

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

Answer 4

实际上，这对我来说效果更好。因为它在元素中保留了完整的属性，但没有为其分配值。

$(selector).attr("data-fieldlength","");

Answer 5

在使用自定义数据属性存储对象数据的隐藏字段中应该使用 .removeAttr() 而不是 .removeData() 使用 ID

Answer 6

一种选择是使用 DOM 自己的 remove 方法。索引 0 引用 jQuery 结果集中的第一个 DOM 元素，因此您可以对其进行直接 DOM 调用。

console.log($('[data-fieldlength]').data('fieldlength'));
$('[data-fieldlength]')[0].removeAttribute('data-fieldlength');
console.log($('[data-fieldlength]').data('fieldlength'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-fieldlength="42">Hello Elliot</div>