当用户需要清空一个元素的内容时，可以使用 jQuery 中的 empty() 方法。它简单易用，只需要传入要清空的元素选择器，方法即可自动执行。以下是 jQuery empty() 方法的详细攻略和两个具体应用示例。
empty() 方法基本语法
$(selector).empty()
- selector：必需。一个 jQuery 选择器，要求选中的元素将会被清空。
方法说明
将匹配元素集合中每个元素的所有子节点全部删除。
示例一：清空单个元素的内容
有时页面中某个元素的内容需要被清空，例如表单提交后需要清空输入框的内容，这时可以使用 empty() 方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery empty() 方法示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input-txt" />
<br />
<button id="clear-btn">清空输入框</button>
<script>
$(function(){
$("#clear-btn").click(function(){
$("#input-txt").empty();
});
});
</script>
</body>
</html>
点击“清空输入框”按钮后，文本框中的内容将会被清空。
示例二：清空多个元素的内容
如果需要清空多个元素的内容，同样可以使用 empty() 方法，只不过在选择器中传入包含多个元素的父元素，方法会自动遍历所有符合条件的子元素并清空它们的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery empty() 方法示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="parent">
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<p>段落内容</p>
</div>
<br />
<button id="clear-btn">清空元素内容</button>
<script>
$(function(){
$("#clear-btn").click(function(){
$("#parent").empty();
});
});
</script>
</body>
</html>
点击“清空元素内容”按钮后，#parent 元素包含的所有子元素内容都将会被清空。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery empty()的例子 - Python技术站
微信扫一扫 
支付宝扫一扫 