removeData()
在元素上移除绑定的数据
.removeData([name ])
- name 类型: String 。要移除的存储数据名.
.removeData()
方法允许我们移除用
.data()
绑定的值。当带
name
参数调用的时候,
.removeData()
将删除那个特有的值,当不带任何参数的时候,
.removeData()
将移除所有的值。
从jQuery的内部
.data()
缓存不影响任何在文档中的HTML5的
data-
属性,使用
.removeAttr()
可以移除这些属性。
需要注意的是
.removeData()
仅会删除来自jQuery内部
.data()
缓存中的数据,并且元素上任何相应的
data-
属性不会被删除。后调用
data()
,会重新检索
data-
的属性的值。为了防止这种情况,可以在
.removeData()
旁边使用
.removeAttr()
来移除
data-
属性。jQuery 1.4.3以前,
data()
没有使用
data-
属性,所以不存在这类问题。
当使用
.removeData("name")
时,如果没有这个属性名字是在内部数据缓存,jQuery将试图在元素上找到一个
data-
的属性。为了避免重复查询
data-
属性,将这个名称设置为无论是
null
或
undefined
的值(例如
.data("name", undefined)
),而不是使用
.removeData()
。
从jQuery 1.7开始
,当键数组或一个空间分隔键的字符串作为参数,调用
.removeData()
时,将删除在该数组每一项元素或字符串的键值。
例子
Set a data store for 2 names then remove one of them.
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:2px; color:blue; }
span { color:red; }
</style>
<script src="./static/js/jquery-3.5.0.js"></script>
</head>
<body>
<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
<script>
$("span:eq(0)").text("" + $("div").data("test1"));
$("div").data("test1", "VALUE-1");
$("div").data("test2", "VALUE-2");
$("span:eq(1)").text("" + $("div").data("test1"));
$("div").removeData("test1");
$("span:eq(2)").text("" + $("div").data("test1"));
$("span:eq(3)").text("" + $("div").data("test2"));
</script>
</body>
</html>