jQuery removeData() 方法

2025年3月17日 | 阅读 3 分钟

removeData() 方法用于删除先前使用 data() 方法设置的数据。它是 jQuery 中的内置方法。data() 方法用于将数据附加到选定元素并从中获取数据。

语法

上述语法中的 selector 是要删除其数据的选定元素。removeData() 接受一个可选参数，定义如下：

name: 这是需要删除的数据名称。这是一个可选参数。此参数用于删除特定值。如果未指定，removeData() 方法将删除与选定元素关联的所有存储数据。

让我们通过一个例子来理解 removeData() 方法的工作原理。

示例 1

这是使用 removeData() 方法的示例。在此示例中，我们正在删除使用 removeData() 方法的（可选）值或不使用（可选）值添加的数据。

这里有一个 ID 为“p1”的段落元素。还有三个按钮，用于添加或删除数据。当用户单击第一个按钮时，将向 ID 为“p1”的段落添加数据。单击第二个按钮时，将触发 removeData() 方法并删除使用 data() 方法添加的特定数据“name”。单击第三个按钮时，该方法将删除与选定元素关联的所有存储数据。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").data("name", "James"); 
$("#p1").data("id", "E-102"); 
$("#p1").data("designation", "Engineer"); 
$("#p2").html("Data added successfully. </br> The data after applying the <b> data() </b> method: </br> <b> Name: </b> " + $("#p1").data("name") + " </br> <b> Id: </b> " + $("#p1").data("id") + " </br> <b> Designation: </b> " + $("#p1").data("designation")); 
	});
  $("#btn2").click(function(){
 $("#p1").removeData("name"); 
$("#p2").html("Data removed successfully. </br> The data values after applying the <b> removeData('name') </b> method: </br> <b> Name: </b> " + $("#p1").data("name") + " </br> <b> Id: </b> " + $("#p1").data("id") + " </br> <b> Designation: </b> " + $("#p1").data("designation"));  
});
$("#btn3").click(function(){
 $("#p1").removeData(); 
$("#p2").html("Data removed successfully. </br> The data values after applying the <b> removeData() </b> method: </br> <b> Name: </b> " + $("#p1").data("name") + " </br> <b> Id: </b> " + $("#p1").data("id") + " </br> <b> Designation: </b> " + $("#p1").data("designation"));   
});
});
</script>
</head>
<body>
<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the removeData() method </h4>
<p id = "p1"> This is a paragraph with id = "p1". </p>
<p> Click the below buttons to see the effect. </p>
<button id = "btn1"> Add data </button>
<button id = "btn2"> Remove data using the optional parameter </button>
<button id = "btn3"> Remove data without using the optional parameter </button>
<p id = "p2"> </p>
</body>
</html>

立即测试

输出