2012-02-08 71 views
24

根據the dataset specelement.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="">嗯。

回答

32

'刪除'刪除數據集元素?例如: -

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

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

+8

注意; '刪除v.dataset.foo;'在Safari中不起作用。跨瀏覽器解決方案將是; 'v.removeAttribute('data-foo')' – 2017-03-15 11:51:15

+0

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

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