jQuery 删除元素

有添加就有删除：清理列表、移除过期提示、清空购物车，都离不开 jQuery 的删除方法。核心是 remove() 与 empty()：一个"连人带房拆掉"，一个"只清空屋里东西"。

先看演示用的 HTML：

<div id="box">
    <p>第一段</p>
    <p class="del">第二段</p>
</div>

remove()：删除元素本身

remove() 把选中元素连同其内部所有内容一起从 DOM 中移除：

$("#box").remove();
// 效果：整个 #box（含两个 p）从页面消失

remove() 还支持传入选择器进行过滤，只删符合条件的元素：

$("p").remove(".del");
// 效果：只删除带 class="del" 的第二段，第一段保留

empty()：清空内部内容

empty() 删除选中元素的所有子元素和内容，但元素外壳保留：

$("#box").empty();
// 效果：#box 还在页面上，但里面两个 p 都没了，变成一个空盒子

remove() 与 empty() 的区别

方法	删什么	元素本身	典型用途
remove()	元素 + 全部内部	一并删除	彻底移除某块内容
empty()	仅内部子元素	保留为空壳	清空容器待重新填充

一句话记忆：remove 拆房子，empty 清屋子。

detach()：移除但保留数据

detach() 与 remove() 相似，但会把元素上绑定的事件和数据保留下来，将来可重新放回页面：

var box = $("#box").detach();  // 移走但记忆还在
$("body").append(box);         // 重新放回后，原来绑定的 click 事件依然有效

适合做"暂存再还原"的场景；remove() 删除的元素无法这样复活。

综合示例：点删除按钮移除当前行

<ul>
    <li>行一 <button class="rm">删除</button></li>
    <li>行二 <button class="rm">删除</button></li>
</ul>

$(".rm").click(function () {
    $(this).parent("li").remove();
    // 效果：点击某行的"删除"，该行 li 整行消失
});

小结

删除三兄弟各司其职：remove() 整块移除（可带选择器筛选）、empty() 只清空内部、detach() 移走但保留数据事件。按"要不要留壳、要不要复活"来选，就不会用错。