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”的标签元素将会被从页面上删除。

延伸阅读