迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

jQuery remove() 方法

作者:迹忆客 最近更新:2023/03/13 浏览次数:

remove() 方法从 jQuery 中的 DOM 中删除元素。类似地,empty() 方法仅删除 DOM 中选定元素的子元素。

本篇文章演示了如何在 jQuery 中使用 removeempty 方法。

jQuery remove() 方法

remove() 方法可以从 DOM 中删除选定的元素。该方法将删除选定的元素和元素内的所有内容。

此方法的语法如下。

$(selector).remove(selector)

其中 selector 是一个可选参数,指定是否删除一个或多个元素,如果要删除的元素不止一个,我们可以用逗号分隔它们。让我们尝试一个 remove() 方法的示例。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#RemoveDiv").remove();
            });
        });
    </script>
</head>
<body>

    <div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">

        <h1> This Div Will be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>

    </div>
    <br>
    <div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">

        <h1> This Div Will not be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>

    </div>
    <button>Remove Div</button>

</body>
</html>

上面的代码将删除选定的 div 及其子元素。见输出:

jQuery remove 方法

正如我们所见,remove() 方法删除了选定元素内的所有元素。另一种方法 empty() 仅删除子元素。

jQuery empty() 方法

empty() 方法可以从选定元素中删除所有子元素。它还会删除子元素内的内容。

empty() 方法的语法如下。

$("selector").empty();

selector 可以是 id、类或元素名称,让我们尝试 empty 方法的示例。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#RemoveDiv").empty();
            });
        });
    </script>
</head>
<body>

    <div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
        Hello this is the div content
        <h1> This Div Content Will be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>

    </div>
    <br>
    <div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">

        <h1> This Div Content Will not be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>

    </div>
    <button>Remove Div</button>

</body>
</html>

上面的代码将只删除 div 的子内容,而不是 div 本身。见输出:

jQuery empty 方法

上一篇:导入 jQuery

下一篇:jQuery 切换隐藏/显示

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 触发点击

发布时间:2024/03/24 浏览次数:186 分类:JavaScript

在今天的文章中,我们将学习 jQuery 中的触发点击事件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便