现在的位置: 主页 > 新闻中心 > 文章列表

jQuery参考实例 1.11 移除DOM元素

作者:北京财贸天阶投资顾问有限公司 来源:www.usasheng.com 发布时间:2017-09-02 11:43:30
 

jQuery参考实例 1.11 移除DOM元素

需求
从DOM树中移除元素。

解决方案
用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执行之前,页面会包含超链接a元素。当remove()方法被执行后,DOM树中的超链接a元素均被移除,而页面上只剩下<h3>元素。

remove()方法还接受一个CSS表达式参数,用于对需要移除的元素进行过滤。比如,采集软件,上述代码可以被改为仅移除class值为”remove”的超链接元素:

<!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>讨论
使用jQuery的remove()方法需要注意两件事情:

使用remove()方法可以将元素从DOM树中移除,专题,但是这些元素依然还在当前选择的jQuery元素集中。remove()方法之后的代码依旧可以对这些元素进行操作,甚至重新插入到DOM树中。
remove()方法在将元素从DOM树中移除之外,还会删除所有该元素上的事件监听器与缓存数据。

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:宜昌网站建设 http://yichang.45qun.com

  • 上一篇:卡汀财经—CFA (特许金融分析师)简介
  • 下一篇:最后一页
  •