web-dev-qa-db-ja.com

HTML5データセットを使用してdata- *属性を削除する方法

データセットの仕様 によると、 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'});
_

ChromeおよびFirefoxでDOMは次のようになります。

_<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="">_と同等です。

javascriptweb-standardshtml5-data
34
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>
50
maximdim

これは、すべての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());
}
1
V P

[〜＃〜] mdn [〜＃〜] のように、データセット要素を削除するには削除演算子を使用する必要があります

属性を削除する場合は、delete演算子を使用できます。

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