如何使用 HTML5 数据集删除 data-* 属性答案

【问题标题】：How to remove data-* attributes using HTML5 dataset如何使用 HTML5 数据集删除 data-* 属性
【发布时间】：2012-03-01 07:47:19
【问题描述】：

根据the dataset spec，element.dataset是怎么删除数据属性的？考虑：

<p id="example" data-a="string a" data-b="string b"></p>

如果你这样做：

var elem = document.querySelector('#example');
elem.dataset.a = null;
elem.dataset.b = undefined;
elem.dataset.c = false;
elem.dataset.d = 3;
elem.dataset.e = [1, 2, 3];
elem.dataset.f = {prop: 'value'};
elem.dataset.g = JSON.stringify({prop: 'value'});

DOM 在 Chrome 和 Firefox 中变成这样：

<p id="example" 
   data-a="null" 
   data-b="undefined" 
   data-c="false" 
   data-d="3" 
   data-e="1,2,3" 
   data.f="[object Object]" 
   data.g="{"prop":"value"}"
></p>

Chrome/Firefox 实现模仿 setAttribute。它基本上首先应用.toString()。除了null 的处理之外，这对我来说是有意义的，因为我希望null 会删除该属性。否则，数据集 API 如何做相当于：

elem.removeAttribute('data-a');

布尔属性呢：

<p data-something> 等价于<p data-something=""> 嗯。

【问题讨论】：

标签： javascript web-standards html5-data

【解决方案1】：

不会“删除”删除数据集元素吗？例如：

<div id="a1" data-foo="bar">test</div>

<script>
var v = document.getElementById('a1');  
alert(v.dataset.foo);
delete v.dataset.foo;
alert(v.dataset.foo);
</script>

【讨论】：

注意； delete v.dataset.foo; 在 Safari 中不起作用。跨浏览器解决方案是； v.removeAttribute('data-foo')
@maximdim，您能否更新您的答案以包含 Jeremy 的评论？即使在 Safari 10 中，这仍然是一个问题。 Safari 11 修复了这个问题（通过 Safari 技术预览检查）
杰里米的回答并不完全正确。如果以编程方式分配值 (v.dataset.foo = 'bar')，则 removeAttribute 与 delete v.dataset.foo 的效果不同——它不会从数据集中删除属性
@ips 确实如此。 v.dataset 动态反映属性的值，它不是一个单独的对象。
delete v.dataset.foo 在我的 Mac 上使用 safari 11.1.2

【解决方案2】：

<div data-id="test">test</div>

$(document).ready(function(){
  $("div").removeAttr("data-id"); // removing the data attributes.
  console.log($("div").data("id")); // displays in the console.
});

【讨论】：

【解决方案3】：

这是删除所有 data-* 属性。您可以在 for 循环中添加条件以仅删除特定的数据属性。希望这会有所帮助:)

var elem = document.querySelector('#example');
var dataset = elem.dataset;
for (var key in dataset) {
    elem.removeAttribute("data-" + key.split(/(?=[A-Z])/).join("-").toLowerCase());
}

【讨论】：

【解决方案4】：

根据MDN，您需要使用删除运算符来删除数据集元素

当你想删除一个属性时，你可以使用删除操作符。

const p = document.getElementById('example')
delete p.dataset.a
delete p.dataset.b

【讨论】：

【解决方案5】：

一个相当简单直接的方法：

const someElement = document.querySelector('...');

Object.keys(someElement.dataset).forEach(dataKey => {
  delete someElement.dataset[dataKey];
});

【讨论】：