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

根据the dataset spec，element.dataset是如何删除数据属性的？试想一下：如何使用HTML5数据集删除数据属性

<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="">嗯。

来源

2012-02-08 ryanve

'删除'删除数据集元素？例如： -

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

来源

2012-02-08 20:55:54 maximdim

'删除elem.dataset.foo'作品！ – ryanve 2012-02-10 16:56:48

注意; '删除v.dataset.foo;'在Safari中不起作用。跨浏览器解决方案将是; 'v.removeAttribute（'data-foo'）' – 2017-03-15 11:51:15

@maximdim，你能否更新你的答案以包括来自Jeremy的评论？即使在Safari 10中，这仍然是一个问题。 Safari 11修复了这个问题（使用Safari Technical Preview进行了检查） – Dogoku 2017-08-10 02:46:22

-5

<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. 
});

来源

2014-05-19 04:05:54 Shakeel

http： //jsfiddle.net/shakeellal/EjV5u/ – Shakeel 2014-05-19 04:06:38

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

回答

相关问题