jQuery remove() 方法

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

Vue React JavaScript Angular CSS HTML

jQuery remove() 方法

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

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

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

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>