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

Question

根据数据集规范,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="">嗯.

Answer 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>

Answer 2

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

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

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