在操作页面元素时，删除操作和添加操作同样频繁。jQuery提供了remove()方法来处理这件事，它不仅仅是从页面上把元素藏起来，而是直接把元素从DOM树中移除。连带元素内部的文本、子节点、属性和绑定的事件、数据全部清除。用这个方法删除的元素，是真的“不留痕迹”。
语法结构
$(selector).remove(selector)
参数说明
-
selector（可选）：对已选中的元素做进一步筛选，只删除匹配的部分。如果想删除多个不同选择器选中的元素，用逗号分隔，比如
$("p, div.note").remove()。
这个可选参数很多人没注意到，实际上它可以省去很多额外的过滤代码。明明选中了一组元素却只想删其中一部分，直接在remove()里传筛选条件就行。
基础示例：删除指定元素
页面上有这么一段内容：
<div id="taskArea">
<p class="notice">系统提示：请及时处理待办事项。</p>
<p class="task-item">完成项目报告</p>
<p class="task-item">回复客户邮件</p>
<p class="task-item done">更新周报</p>
</div>
<button id="clearNotice">清除提示</button>
<button id="clearDone">清除已完成</button>
点击按钮删除对应的元素：
// 删除提示信息
$("#clearNotice").click(function() {
$(".notice").remove();
});
// 只删除带有done标识的任务
$("#clearDone").click(function() {
$(".task-item").remove(".done");
});
第二个例子展示了remove()参数的作用——在.task-item中只删除匹配.done的那一项，其他任务项保留不动。不用这个参数的话，就得先用.filter()筛选再删除，多写一步。
remove()、detach()和empty()的边界
这三个方法经常被放在一起比较，但各自的职责不同：
-
remove()：删除元素本身，连同内部所有内容、事件绑定和$.data()数据全部清除。删干净了，想恢复的话只能重新创建。
-
detach()：同样把元素从DOM中移除，但保留事件绑定和数据。适合“暂时移走、稍后放回来”的场景。
-
empty()：不删元素本身，只清空内部的所有子节点。元素还在，就是个空壳。
用代码对比一下区别：
// 假设页面上有一个绑定过click事件的div
$("#myDiv").click(function() {
alert("点击了div");
});
// remove()：div消失，事件也消失，重新加回来也不会恢复事件
$("#myDiv").remove();
// detach()：div消失，但事件保留。存下来可以后续放回去
var savedDiv = $("#myDiv").detach();
$("body").append(savedDiv); // 重新放回去，click事件依然有效
// empty()：div还在原位，只是内部空了
$("#myDiv").empty(); // div变成<div id="myDiv"></div>
本节课程知识要点
在项目中，我遇到过一个场景很好地说明了为什么要区分这三个方法。一个评论列表需要实现“临时屏蔽”功能，用户点击屏蔽后评论消失，但撤销操作还能恢复。这时候用remove()就废了，因为事件和数据全没了，恢复回来的评论没法交互。用detach()把评论元素暂存到变量里，撤销时原样插回去，用户体验很流畅。如果是“清空草稿箱”这种操作，用empty()保留容器框架，方便后续往里填充新内容。
所以选哪个方法取决于你的真实意图：彻底删除用remove()，暂存待恢复用detach()，清空内容保留容器用empty()。
多个元素批量删除
remove()可以直接接受用逗号分隔的多个选择器，一次性删掉不同类型的元素：
// 同时清除提示信息、错误标记和空段落
$(".alert, .error-label, p:empty").remove();
这种方式比链式调用多次remove()更简洁，一步到位完成清理工作。在写清理函数或重置页面状态时尤其方便。
个人经验：删除前先确认
一个容易被忽视的细节是，remove()执行后，被删元素上通过$.data()绑定的数据也跟着消失了。如果你的应用在这些数据里存了重要状态，删除前要考虑是否需要先读取或转移。如果页面上有其他JavaScript引用指向被删除的DOM节点，这些引用不会自动失效，可能造成内存泄漏。虽然现在浏览器在处理上已经改善了不少，但养成良好的清理习惯总是没错的——移除元素后把相关引用置为null，能有效避免隐患。
删除后还能找回来吗
remove()方法本身有返回值，返回的就是被删除的jQuery对象。也就是说，元素虽然从DOM里移走了，但如果你想，可以把它暂存起来再放回去。但注意，和detach()不同，remove()返回的元素已经丢失了事件和数据：
var removed = $(".notice").remove();
// removed仍然持有被删元素的引用，但事件和数据已经没了
// 可以在需要时放回去，只是需要重新绑定事件
$("#taskArea").prepend(removed);
如果这个行为不符合需求，那就说明你应该用detach()而不是remove()。很多时候写着写着发现问题了，回头一看才知道方法选错了。
remove()是jQuery中做DOM清理的基础方法，作用很直接——选中谁删谁，删得干净彻底。但正因为它删得太彻底，使用时要确认是否真的不需要保留数据、事件以及后续恢复的可能性。配合detach()和empty()两个兄弟方法，基本能应对所有元素移除相关的需求场景。关键在于根据实际意图做出正确选择，而不是每次都下意识地用同一个方法。
