如何使用HTML数据集属性删除data-*属性
How to remove data-* attributes using the HTML dataset attribute
根据数据集规范,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="">
嗯。
难道不会"delete"删除数据集元素吗?例如:
<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.
});
相关文章:
- RegEx删除空属性?例如,如果(class=“”||class=“”)移除;否则就下课
- 未捕获的类型错误:无法读取属性'删除'的未定义
- 在不知道深度或父属性的情况下从对象中删除属性
- 一个正则表达式,用于从JS中的HTML标记中删除id、样式和类属性
- 如何从对象中删除属性
- 如何选择多个输入字段并删除所需的属性
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 如果另一个属性相同,请删除该属性
- 为什么toStaticHTML删除data-*属性
- 使用jQuery添加和删除属性
- AngularJS-深层对象'属性删除
- 无法读取空放置区的属性“删除子项”
- 如何使用jquery按数据属性删除li标签
- JavaScript 属性删除如果为假,则不删除,如果为真循环
- 如何使用HTML数据集属性删除data-*属性
- Javascript -将属性拉入数组/根据属性删除项
- 如何使用select标签的title属性删除选中的选项
- jquery:通过指定数据属性删除元素
- 基于属性删除对象
- javascript属性删除