Skip to main content

jQuery 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容​

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素

jQuery remove() 方法​

jQuery remove() 方法删除被选元素及其子元素。(包括清空事件，释放了内存，解决了内存泄漏的问题)

实例

$("#div1").remove();

jQuery empty() 方法​

jQuery empty() 方法删除被选元素的子元素。(包括清空事件，释放了内存，解决了内存泄漏的问题)

实例

$("#div1").empty();

jQuery html("") 方法​

清空内容，但是若是有事件的话还会保留，缺点在于会占用内存，虽然有时候占有内存不多但是总归是占有一定的空间。

$("div").html();//仅仅清空元素的内容，会保留事件

过滤被删除的元素​

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

实例

$("p").remove(".italic");

笔记​

笔记一​

如果子元素符合过滤器中条件而父元素不符合的话，是不会删除符合条件的子元素，即过滤器中条件只能作用于同级，不能作用于子元素。

实例

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").remove(".part");
    });
});

笔记二​

对楼上进行补充：

$(selector) 语法的返回结果是一个元素的列表，即：将 $("#div1") 看作一个列表，remove() 中的筛选条件实际上是对这个列表中的元素进行筛选删除，而不会去删除这个列表中不存在的元素（子元素不在这个列表中）。

笔记三​

補充樓上：因此需要修改selector，改為選取id="div1"中的所有

元素，再從中篩選出class="part"的

元素，然後刪除該元素。

$(document).ready(function(){
    $("button").click(function(){
        $("#div1>p").remove(".part");
    });
});

笔记四​

假如你扔掉了一瓶水，那就是 remove。

假如你倒掉了一瓶水，那就是 empty。

链接​

优秀文章：https://www.cnblogs.com/web001/p/8410717.html