jQuery教程 jQuery安装 jQuery语法 jQuery选择器 jQuery事件 jQuery隐藏与显示 jQuery淡入淡出 jQuery show()方法 jQuery hide()方法 jQuery toggle()方法 jQuery fadeIn()方法 jQuery fadeOut()方法 jQuery fadeToggle()方法 jQuery slideUp()方法 jQuery slideDown()方法 jQuery slideToggle()方法 jQuery animate()方法 jQuery stop()方法 jQuery callback jQuery链式调用 jQuery html()方法 jQuery text()方法 jQuery va l()方法 jQuery append()方法 jQuery prepend()方法 jQuery after()方法 jQuery before()方法 jQuery remove()方法 jQuery empty()方法 jQuery addClass()方法 jQuery removeClass()方法 jQuery css方法 jQuery toggleClass方法

jQuery empty()方法

栏目： jquery 发布时间：2024-12-24

empty 方法是 jQuery 提供的一个用于移除被选元素内部所有子元素（包括文本、子节点等）的方法，但保留被选元素本身。这个方法在你需要清空某个元素的内容而不需要删除该元素本身时非常有用。

基本语法

$(selector).empty();

selector：一个用于选择要被清空内容的元素的 jQuery 选择器。

示例

假设我们有以下 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery empty 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // 示例代码将在这里编写
        });
    </script>
</head>
<body>
    <div id="content">
        <p>段落 1</p>
        <ul id="list">
            <li>项 1</li>
            <li>项 2</li>
            <li>项 3</li>
        </ul>
        <button id="emptyBtn">清空列表</button>
    </div>
</body>
</html>

示例 1：清空列表内容

$(document).ready(function(){
    $("#emptyBtn").click(function(){
        $("#list").empty();
    });
});

在这个示例中，当用户点击按钮时，#list 元素内的所有内容（包括 <li> 元素和它们的文本）都会被移除，但 #list 元素本身会保留在 DOM 中。

示例 2：清空段落内容

$(document).ready(function(){
    $("#emptyBtn").click(function(){
        $("p").empty();
    });
});

在这个示例中，当用户点击按钮时，所有的 <p> 元素内的文本都会被移除，但 <p> 元素本身会保留。

注意事项

事件处理器：empty 方法只会移除元素的内容，不会移除与该元素或其子元素关联的事件处理器。然而，由于子元素已被移除，任何直接绑定到这些子元素的事件处理器将不再有效。
性能：empty 方法在处理大量子元素时性能通常很好，因为它只是简单地移除元素的内容，而不涉及复杂的 DOM 操作。
链式调用：empty 方法返回的是被操作元素的 jQuery 对象，这意味着你可以在这个方法之后进行链式调用，继续对该元素进行其他操作。
不可逆性（相对）：虽然 empty 方法本身是可逆的（你可以再次向元素中添加内容），但一旦内容被移除，你就无法恢复原始的子元素和它们的文本，除非你有备份或重新生成这些内容的方式。

实际应用

empty 方法在实际开发中有很多应用场景，比如：

在用户提交表单后清空表单字段（虽然通常使用 .val('') 或 .prop('checked', false) 等方法来清空表单控件）。
在用户点击按钮时清空列表或容器，以便显示新的内容。
在动态生成内容时，先清空目标元素，再添加新内容。

本文地址：https://www.tides.cn/p_jquery-empty