jQuery删除与清空元素

3,751字

16–24 分钟

jQuery删除元素与jQuery清空元素是jQuery HTML元素操作的核心功能，二者均用于处理DOM元素的移除或内容清理，却存在本质区别。jQuery删除元素指将指定DOM元素及其所有子元素、事件绑定完全从DOM树中移除，jQuery清空元素则仅清除指定元素的子元素及内容，保留元素本身与事件绑定。实现这两类操作的核心方法为remove()、detach()、empty()，三种方法功能各异、适配不同场景，熟练掌握jQuery删除元素与jQuery清空元素的用法，能有效提升前端页面DOM管理的效率。

删除元素方法

jQuery删除元素的核心方法有两种，分别为remove()与detach()，两种方法均能实现元素从DOM树中的移除，核心区别在于是否保留元素的事件绑定与数据，可根据实际开发中是否需要复用元素灵活选择。

remove()方法

remove()方法用于将指定DOM元素及其所有子元素、绑定的事件、关联的数据完全从DOM树中移除，移除后元素无法直接复用，若需再次使用需重新创建，是jQuery删除元素中最常用的方法。

语法

// 删除指定选择器对应的元素
$(selector).remove();

// 筛选并删除指定条件的元素
$(selector).remove(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery remove()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 10px 0; }
        .special { background-color: #ffe485; }
    </style>
</head>
<body>
    <div class="box" id="target1">元素1（将被完整删除）</div>
    <div class="box special" id="target2">元素2（特殊类，将被筛选删除）</div>
    <div class="box" id="target3">元素3（不被删除）</div>

    <script>
        // 删除指定id的元素
        $("#target1").remove();

        // 筛选删除带有special类的元素
        $(".box").remove(".special");

        // 给元素绑定事件后删除，事件会被一并移除
        $("#target3").click(function() {
            alert("点击事件");
        }).remove();
    </script>
</body>
</html>

detach()方法

detach()方法与remove()方法功能相似，均用于将指定DOM元素及其所有子元素从DOM树中移除，但detach()方法会保留元素绑定的事件与关联的数据，移除后元素可重新插入DOM树中复用，是jQuery删除元素中适合元素复用场景的方法。

语法

// 移除指定选择器对应的元素，保留事件与数据
$(selector).detach();

// 筛选并移除指定条件的元素，保留事件与数据
$(selector).detach(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery detach()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 10px 0; }
        .reuse { background-color: #e6f7ff; }
    </style>
</head>
<body>
    <div class="box reuse" id="target">可复用元素（移除后重新插入）</div>
    <button id="detachBtn">移除元素</button>
    <button id="insertBtn">重新插入元素</button>

    <script>
        // 给元素绑定点击事件
        $("#target").click(function() {
            alert("复用元素的点击事件");
        });

        // 存储元素引用，用于后续复用
        var detachedElem;

        // 移除元素，保留事件与数据
        $("#detachBtn").click(function() {
            detachedElem = $("#target").detach();
        });

        // 重新插入元素，事件依然有效
        $("#insertBtn").click(function() {
            $("body").append(detachedElem);
        });
    </script>
</body>
</html>

清空元素方法

jQuery清空元素的核心方法为empty()，该方法仅清除指定DOM元素内部的所有子元素、文本内容及节点，不会移除元素本身，也不会删除元素绑定的事件与关联的数据，常用于仅需清理内容、保留元素容器的场景。

empty()方法

empty()方法用于清空指定元素的内部内容，包括所有子元素、文本节点、注释节点等，清空后元素本身依然存在于DOM树中，其绑定的事件与数据也保持不变，是jQuery清空元素的唯一核心方法。

语法

// 清空指定选择器对应元素的内部内容
$(selector).empty();

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery empty()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .container { border: 2px solid #000; padding: 10px; margin: 10px 0; }
        .child { border: 1px solid #f00; padding: 5px; margin: 5px 0; }
    </style>
</head>
<body>
    <div class="container" id="target">
        <div class="child">子元素1</div>
        <div class="child">子元素2</div>
        <p>容器内文本内容</p>
    </div>
    <button id="emptyBtn">清空内容</button>

    <script>
        // 给容器绑定点击事件，清空后事件依然有效
        $("#target").click(function() {
            alert("容器点击事件（清空后仍有效）");
        });

        // 清空容器内部内容，保留容器本身
        $("#emptyBtn").click(function() {
            $("#target").empty();
        });
    </script>
</body>
</html>