js浏览器操作DOM之删除DOM
删除一个DOM节点就比插入要容易得多。
要删除一个节点,首先要获得该节点本身以及它的父节点,然后调用父节点的removechild把自己删掉即可:
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div> <script> 'use strict'; //获取需要删除的节点 var self = document.getElementById('java'); //获取需要删除节点的父节点 var parent = self.parentElement; //进行删除操作 //var removed = parent.removeChild(self); parent.removeChild(self); </script> </body> </html>
结果:
删除的节点虽然不在文档树中了,但其实它还是在内存中保留的,可以随时再次被添加到别的位置
!Doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div> <script> 'use strict'; //获取需要删除的节点 var self = document.getElementById('java'); //获取需要删除节点的父节点 var parent = self.parentElement; //进行删除操作 //var removed = parent.removeChild(self); var removed = parent.removeChild(self); console.log(removed === self); </script> </body> </html>
结果:
当我们遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且在子节点变化时会实时更新。
如下面的例子:
<div id="parent"> <p>First</p> <p>Second</p> </div>
当我们用如下代码删除子节点时:
var parent = document.getElementById('parent'); parent.removeChild(parent.children[0]); parent.removeChild(parent.children[1]); // <-- 浏览器报错
浏览器报错:parent.children[1]
不是一个有效的节点。原因就在于,当<p>First</p>
节点被删除后,parent.children
的节点数量已经从2变为了1,索引[1]
已经不存在了。
因此,删除多个节点时,要注意children
属性时刻都在变化。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步