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

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

Answer 3

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

当您想要删除某个属性时，可以使用删除运算符。

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

Answer 4

这是为了删除所有 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());
}

Answer 5

<div id="DomTest" data-load="true" data-id="5468KmH" data-page="1">test</div>
var DomTest = document.getElementById("DomTest");

 Object.keys(DomTest.dataset).forEach(key => { delete DomTest.dataset[key]; })

Answer 6

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