jQuery 删除元素

在开发网页应用时，你经常会碰到需要删除某些元素的场景，比如移除一条消息、清空某个列表，或删除动态添加的内容。在这一节中，你将学习如何使用 jQuery 删除 DOM 元素，并了解不同删除方法的区别。

我们将重点讲解以下几个方法：

• .remove()：彻底移除元素和数据
• .detach()：删除元素但保留数据和事件
• .empty()：清空元素的内容，但不删除自身

掌握这些方法后，你就能灵活地对页面中的元素进行清理和管理。

.remove() 方法

如果你想完全从 DOM 中删除某个元素，包括它的所有内容和绑定的数据、事件，使用 .remove() 就对了。

示例：

<div id="box">
  <p>这是一个段落</p>
</div>

<button id="btn">删除</button>

<script>
  $('#btn').click(function () {
    $('#box').remove();
  });
</script>

点击按钮后，整个 #box 元素（连同里面的 <p>）都会被彻底移除。

特点：

• .remove() 会连带删除元素绑定的事件和数据；
• 被移除的元素可以通过变量保存，并稍后重新插入页面。

const $removed = $('#box').remove();
// 稍后可以再次添加回来：
$('body').append($removed);

.detach() 方法

.detach() 和 .remove() 类似，区别在于：

.detach() 会将元素从 DOM 中移除，但保留绑定的数据和事件处理器。

这在你需要暂时移除元素、以后再还原回来的时候特别有用。

示例：

const $box = $('#box').detach();
// 保留事件处理器
$('body').append($box); // 原样插回页面

.empty() 方法

有时你只是想清空某个容器的内部内容，比如清除某个 <ul> 中的所有 <li>，这时候可以用 .empty() 方法。

示例：

<ul id="list">
  <li>项目一</li>
  <li>项目二</li>
</ul>

<button id="clear">清空列表</button>

<script>
  $('#clear').click(function () {
    $('#list').empty();
  });
</script>

点击按钮后，#list 元素仍然保留，但里面的 <li> 项全被清空了。

常见场景总结

你想做什么	推荐方法	是否保留事件
永久移除元素及其内容和事件	.remove()	否
暂时移除元素，稍后恢复（保留事件）	.detach()	是
保留元素本身，只清除内部内容	.empty()	不涉及

小结

在本节中，你学习了如何使用 jQuery 删除或清空元素。主要内容包括：

• .remove()：彻底移除元素，包括事件和数据；
• .detach()：删除元素但保留事件和数据，方便之后重新插入；
• .empty()：清空元素内部的内容，但保留元素本身。

掌握这些方法后，你就可以灵活地控制页面内容的显示与隐藏，更好地实现用户交互效果。