DOM节点删除之empty()的基本用法

最新推荐文章于 2020-12-21 11:59:34 发布

2_NARUTO_2

最新推荐文章于 2020-12-21 11:59:34 发布

阅读量1.7k

点赞数 1

分类专栏： iQuery

本文链接：https://blog.csdn.net/Little_Frog_Prince/article/details/72794315

版权

iQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。
这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML：

<div class="hello"><p>慕课网</p></div>

如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中

//通过empty处理
$('.hello').empty()

//结果：<p>慕课网</p>被移除
<div class="hello"></div>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    div {
        background: #bbffaa;
        width: 300px;
    }
    </style>
</head>

<body>
    <h2>通过empty移除元素</h2>
    <div id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on('click', function() {
        //通过empty移除了当前div元素下的所有p元素
        //但是本身id=test的div元素没有被删除
        $("#test").empty()
    })
    </script>
</body>

</html>

这里写图片描述

2_NARUTO_2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM节点删除之empty()的基本用法

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML：<div class="hello"><p>慕课网</p></div>如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是
复制链接

扫一扫