• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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-属性,将这个名称设置为无论是nullundefined的值(例如.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="https://www.lanmper.cn/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.hasData()