jQuery 的删除方法用于移除 DOM 中的元素或清空元素内容，主要包含 empty()、remove([expr])、detach([expr]) 三个方法，下面将结合示例详细逐个介绍。
用于清空匹配元素的所有子内容（包括文本、子元素、节点），但保留元素本身（含自身的属性、事件绑定）。语法：
$(目标元素).empty()示例：
<div class="container">
<div class="inner inner_row1">Hello</div>
<div class="inner inner_row2">Goodbye</div>
</div>运行如下 jQuery 代码：
$('.container').empty();效果如下：
<div class="container"></div>用于从 DOM 中删除匹配的元素本身及所有子内容，且移除元素的所有属性、事件绑定（无法恢复）。语法：
$(目标元素).remove([筛选表达式])参数：
expr：表示可选的选择器，用于筛选要删除的元素（如 $('div').remove('.delete') 仅删除带 .delete 的 div）。
示例：
<div class="container">
<div class="inner inner_row1">Hello</div>
<div class="inner inner_row2">Goodbye</div>
</div>运行如下 jQuery 代码：
$('div').remove('.inner_row1');效果如下：
<div class="container">
<div class="inner inner_row2">Goodbye</div>
</div>用于从 DOM 中删除匹配的元素本身及所有子内容，但保留元素的属性、事件绑定（可重新插入 DOM 恢复）。语法：
$(目标元素).detach([筛选表达式])参数：
expr：表示可选的选择器，用于筛选要删除的元素（如 $('div').remove('.delete') 仅删除带 .delete 的 div）。
示例：删除后重新插入，保留事件
<div class="container">
<div class="inner inner_row1">Hello</div>
<div class="inner inner_row2" onclick="alert('Goodbye')">Goodbye</div>
</div>运行如下 jQuery 代码：
// 删除 class 为 inner_row2 的元素，但不从jQuery对象中移除
var innerRow2 = $('.inner_row2');
// 删除
innerRow2.detach();
// 3秒钟后恢复
setTimeout(function() {
innerRow2.appendTo('.container');
}, 3000);下面通过表格对别上面各个方法的区别：
| 方法 | 操作对象 | 是否保留自身 | 是否保留事件 / 属性 | 能否恢复 | 适用场景 |
|---|---|---|---|---|---|
| empty() | 元素内部内容 | 保留 | 保留 | - | 清空输入框、重置容器内容 |
| remove() | 元素本身 + 内部内容 | 删除 | 移除 | 不能 | 永久删除元素，无需复用 |
| detach() | 元素本身 + 内部内容 | 删除 | 保留 | 可以 | 临时移除元素，后续需复用 |
下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
h3 { font-size: 18px; }
.container { border: 1px solid blue; padding: 10px; }
.inner { border: 1px solid red; padding: 10px; margin: 5px; }
</style>
</head>
<body>
<div class="app">
<h3>删除</h3>
<div class="container">
<div class="inner inner_row1">Hello</div>
<div class="inner inner_row2" onclick="alert('Goodbye')">Goodbye</div>
</div>
</div>
<div id="message"></div>
<div>
<!-- empty() 删除匹配的元素集合中所有的子节点 -->
<button type="button" onclick="
// 删除 class 为 container 的元素中的所有子节点
$('.container').empty();
">$('.container').empty()</button>
<!-- remove([expr]) 从DOM中删除所有匹配的元素 -->
<button type="button" onclick="
// 删除 class 为 inner_row1 的元素
$('div').remove('.inner_row1');
">$('div').remove('.inner_row1')</button>
<!-- detach([expr]) 从DOM中删除所有匹配的元素，不会把匹配的元素从jQuery对象中删除 -->
<button type="button" onclick="
// 删除 class 为 inner_row2 的元素，但不从jQuery对象中移除
var innerRow2 = $('.inner_row2');
// 删除
innerRow2.detach();
// 3秒钟后恢复
setTimeout(function() {
innerRow2.appendTo('.container');
}, 3000);
">detach([expr])</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098