jQuery中删除DOM节点为空并移除

序

最近刚学到新知识。虽然是一个小知识点，但还是忍不住想和大家分享一下。本文内容主要针对初学者。如果您有任何意见或问题，可以留言交流。我们来看看详细的介绍。empty()是指删除该节点的后代，导致该节点为空(该节点中没有元素)。remove()表示删除节点，结果是删除节点(节点及其后代都不存在)。

放下面的代码来说明。

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title script src=' http :http://libs . Baidu.com/jquery/1 . 9 . 1/jquery . js '/script style body { background : # ffe5aa；} # test1 { width:100px高度：100 px；背景# 3db7ff} # test2 { width:100px高度：100 px；背景# ff179f}/style/head body Div class=' whole ' button class=' bt1 '通过empty /button button class='bt2 '删除节点通过remove/button/Div id=' test1 ' p element 1/p element 2/p/Div id=' test2 ' p element 3/p p element 4/p/Div脚本类型=' text/JavaScript ' $(. bt1 ')删除节点。on ('click '，function () {$ ('# test1 ')。empty()；})$(. bt2 ')。on('click '，function(){ $('#test2 ')。移除()；} })/script/body/html/html单击“运行”后，将出现以下屏幕。

单击按钮1。将执行empty()指令，预计test1的子节点元素将被删除。结果如下。

再次单击按钮2。将执行remove()命令。预计将删除Test2及其后代子节点元素。结果如下。

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。