removeData() jquery 方法不起作用答案

【问题标题】：removeData() jquery method not workingremoveData() jquery 方法不起作用
【发布时间】：2020-09-27 04:35:23
【问题描述】：

我认为我使用 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

【问题讨论】：

用法是：jQuery.removeData($('.questionList > li').eq(1), "fieldlength")
@karthikr 有两种方法：api.jquery.com/removeData 和 api.jquery.com/jquery.removeData

标签： jquery custom-data-attribute

【解决方案1】：

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

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

例如，要从元素中实际删除数据属性，您需要使用：

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

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

就我个人而言，我认为这种行为是错误的，而且我肯定会吸引很多人。

【讨论】：

我认为，从编码的角度来看，在 DOM 中保留 data- 属性会更好，但将 JavaScript 的 .data() 变量设置为 null。这在 jQuery 中提供了所需的结果，而不会不必要地破坏 DOM 属性；它总是有可能在其他地方使用（例如，CSS 样式可能依赖于它）。
@Blazemonger，作为说明，我尝试将 data-remote 从 true 更改为 false，并且使用 .data() 或 .removeData() 没有工作，.removeAttr() 工作正常。所以对于那些不关心 DOM 属性的人来说，这个方法非常有用。

【解决方案2】：

这是因为您的 data 源自 HTML data-fieldlength 属性。根据the docs：

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

所以不是

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

你应该这样做

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

【讨论】：

谢谢！这行得通，尽管即使在阅读了文档中的解释之后，我仍然对到底发生了什么有点模糊。
据我了解：.data() 方法会检查 JavaScript 值是否存在值，如果找不到，则会转而使用 data- 属性。您删除了内部 JavaScript 值，因此它像设计的那样转到 data- 属性。相反，如果您将 JavaScript 值设置为 null，它会愉快地检索它并忽略 data- 属性。
我曾经认为data- 属性在页面第一次加载时只被吞了一次——如果是这样的话，你的代码就可以正常工作了。事实上，the docs 建议在 jQuery 1.4.3 之前使用方法
看来，与上面引用的文档相反，传递undefined 没有效果，但将null 传递给data() 调用会将值设置为空。

【解决方案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);

【讨论】：

【解决方案4】：

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

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

【讨论】：

在这上面花了很多时间。我认为 JQuery 中有一个错误。我最终也使用了这个变体 \ $(thisTr).find(".tdTspec").attr("data-tspecno", "0");\

【解决方案5】：

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

【讨论】：

【解决方案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>

【讨论】：