• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • empty()

    从DOM中移除集合中匹配元素的所有子节点。

    .empty()

    这个方法不接受任何参数。

    这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML:

    <div class="container">
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
    </div>
    

    我们可以移除里面的任何元素

    $('.hello').empty();
    

    结果文本Hello文本被删除:

    <div class="container">
      <div class="hello"></div>
      <div class="goodbye">Goodbye</div>
    </div>
    

    如果<div class="hello">里面包含任何数量的嵌套元素,他们也会被移走。

    为了避免内存泄漏,jQuery先移除子元素的数据和事件处理函数,然后移除子元素。

    如果你想删除元素,不破坏他们的数据或事件处理程序(这些绑定的信息还可以在之后被重新添加回来),请使用.detach()代替。

    例子

    移除段落中的所有子节点包括文本

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      p { background:yellow; }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>
      Hello, <span>Person</span> <a href="javascript:;">and person</a>
    </p>
     
    <button>Call empty() on above paragraph</button>
    <script>
      $("button").click(function () {
        $("p").empty();
      });
    </script>
     
    </body>
    </html>
    

    上篇:detach()

    下篇:remove()