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>
value1 before creation:
value1 after creation:
value1 after removal:
value2 after removal:

上篇: data()

下篇: jQuery.data()