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

    xiaoxiao2024-04-10  112

    本节书摘来自异步社区《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中删除所有锚元素,该页面在外观上只包含一个元素。也可以向方法传递一个表达式,过滤需要删除的元素集。例如,代码可以进行如下改写,只删除具有特殊类的锚:

    <!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中删除元素,而且删除被删除元素包含的所有事件处理程序和内部缓存数据。

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)