[英]How to remove data-* attributes using HTML5 dataset
根據數據集規范, 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="">
嗯。
不會“刪除”刪除數據集元素嗎? 例如:
<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>
一個相當簡單和直接的方法:
const someElement = document.querySelector('...');
Object.keys(someElement.dataset).forEach(dataKey => {
delete someElement.dataset[dataKey];
});
這是為了刪除所有 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());
}
根據MDN,您需要使用 delete 運算符來刪除數據集元素
當你想刪除一個屬性時,你可以使用 delete 操作符。
const p = document.getElementById('example') delete p.dataset.a delete p.dataset.b
<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.
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.