《jQuery Cookbook中文版》——1.11 删除DOM元素-阿里云开发者社区

开发者社区> 异步社区> 正文

《jQuery Cookbook中文版》——1.11 删除DOM元素

简介: 在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除。这意味着,从理论上说,可以继续操作它们,甚至可以在必要的时候将它们重新添加到DOM中。
+关注继续查看

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.11节,作者:【美】jQuery社区专家组著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.11 删除DOM元素

1.11.1 问题
你想从DOM中删除元素。

1.11.2 解决方案
remove()方法可以用于从DOM中删除选中的元素集及其子元素。请看如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h3>Anchors</h3>
<a href='#'>Anchor Element</a>
<a href='#'>Anchor Element</a>
<a href='#'>Anchor Element</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
 jQuery('a').remove();
</script>
</body>
</html>

当把上述代码加载到浏览器中时,锚元素将留在页面中,直到JavaScript执行。一旦使用remove()方法从DOM中删除所有锚元素,该页面在外观上只包含一个< h3>元素。也可以向方法传递一个表达式,过滤需要删除的元素集。例如,代码可以进行如下改写,只删除具有特殊类的锚:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h3>Anchors</h3>
<a href='#' class='remove'>Anchor Element</a>
<a href='#'>Anchor Element</a>
<a href='#' class="remove">Anchor Element</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
 jQuery('a').remove('.remove');
</script>
</body>
</html>

1.11.3 讨论
当使用jQuery方法时,必须记住两点:

在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除。这意味着,从理论上说,可以继续操作它们,甚至可以在必要的时候将它们重新添加到DOM中。
这种方法不仅从DOM中删除元素,而且删除被删除元素包含的所有事件处理程序和内部缓存数据。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
VB编程:数组中删除数组元素
VB编程:数组中删除数组元素
14 0
jQuery EasyUI API 中文文档 - 组合树(ComboTree)
ComboTree 组合树 扩展自 $.fn.combo.defaults 和 $.fn.tree.defaults。用 $.fn.combotree.defaults 重写了defaults。
919 0
C# 遍历List 并删除某个元素
1、我们选择用for循环, for(int i=0;i {      if(list[i])     {         list.
1160 0
关于COM中的复合文档
关于COM中的复合文档   关于COM中的复合文档 结构化的存储 在永久存储机制下,普通文件都是用字节组织的.每个文件都是没有次序的字节组成的.
745 0
《jQuery Cookbook中文版》——1.11 删除DOM元素
在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除。这意味着,从理论上说,可以继续操作它们,甚至可以在必要的时候将它们重新添加到DOM中。
1245 0
jquery 遍历dom元素
$('#navBarID').children()  //选定元素的所有孩子节点 $('#navBarID').children().eq(i) //选定元素的第i个孩子节点,从0计数
858 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载