jQuery empty() VS remove()

＊且听风吟

于 2019-12-02 19:12:59 发布

阅读量200

点赞数

分类专栏： # jQuery

本文链接：https://blog.csdn.net/HH18700418030/article/details/103355132

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

empty 和 remove的区别

empty()
remove()

empty()

empty() 是移除被选元素的所有子节点，不包括自身。

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }   
  </style>
</head>
<body>
  <div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <button>empty VS remove</button>
  </div>
  <script type="text/javascript">
    $("button").on('click',function(){
      $('#container').empty()
    })
  </script>
</body>
</html>

点击按钮前：
在这里插入图片描述
点击按钮后：

只剩下了自身还留在 dom 树上。

remove()

remove() 是移除被选元素的所有节点，包括自身。

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }   
  </style>
</head>
<body>
  <div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <button>empty VS remove</button>
  </div>
  <script type="text/javascript">
    $("button").on('click',function(){
      $('#container').remove()
    })
  </script>
</body>
</html>

点击按钮前：
在这里插入图片描述
点击按钮后：

可以看到，完全删除了 dom 节点。

＊且听风吟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery empty() VS remove()

empty 和 remove的区别empty()remove()empty()empty() 是移除被选元素的所有子节点，不包括自身。例子：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>test</title> <script ...
复制链接

扫一扫