jquery删除DOM元素

jQuery中在页面上删除一个DOM元素有两种方式：一种是“伪删除”，即删除之后页面元素的标签还在，只是内容被删除，jQuery中相应的函数为empty()函数；还有一种是“真删除”，这种删除将使该标签元素从页面上彻底消失，jQuery中相应的函数为remove([expr])函数。这两个函数的声明、返回值以及参数信息如表8.16所示。

表8.16 empty()函数和remove([expr])函数

函数名

empty()

remove([expr])

作用

删除匹配的元素集合中所有的子节点。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素

从DOM中删除所有匹配的元素

返回值

jQuery

jQuery

参数

无

expr (String)：（可选）用于筛选元素的jQuery表达式

使用8.4节中的测试页面对本节的两种删除函数进行比较，修改jQuery部分代码如下所示：

$(document).ready(function(){

                //触发onclick事件

                $("#testbutton").click(

                    function(){

                        $("p#second").empty();      //删除子节点

                    }

                );

    });

单击测试按钮，会看到页面执行之后的效果如图8.15所示。

 

图8.15 empty()函数效果

可以看出，执行之后，id为“second”的标签元素从页面上消失了。不过注意，执行之后的HTML代码如下所示：

<p id="first">第一段文字，id为first。</p>

<p id="second"> </p>

<p id="third">第三段文字，id为third。</p>

也就是说，id为“second”的标签元素并没有消失，只是标签内的内容被清除了而已。如果这个时候有如下jQuery代码。

$("p#second").html("<b>再次使用</b>");

则会看到，id为“second”的标签元素的内容会被重新填充。针对remove([expr])函数，修改上述jQuery代码如下所示：

$(document).ready(function(){

                //触发onclick事件

                $("#testbutton").click(

                    function(){

                        $("p#second").remove();     //删除匹配元素

                    }

                );

    });

上述代码执行之后的效果和上例基本一样，但是执行之后的HTML代码如下所示。

<p id="first">第一段文字，id为first。</p>

<p id="third">第三段文字，id为third。</p>

读者会发现，页面上已经不存在id为“second”的标签元素了。因此，如果这个时候使用$("p#second")选择器将得不到任何匹配结果。另外，remove([expr])函数的参数除了可以为空之外还可以为一个jQuery表达式。例如，同样是需要删除id为“second”的标签元素，也可以使用下面的jQuery代码。

$(document).ready(function(){

                //触发onclick事件

                $("#testbutton").click(

                    function(){

                        $("p").remove("#second");

                    }

                );

    });

代码表示，针对$("p")匹配的所有<p>标签元素中，id为“second”的标签元素将会被从页面上删除。

转载于:https://www.cnblogs.com/tocgi/archive/2012/10/29/2744696.html