2012-11-11 来源:网络
【实例名称】
JS实现动态删除页面中的元素
【实例描述】
可以使用DOM删除页面中指定的元素而不刷新页面。本例介绍如何实现动态删除。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script type="text/javascript"> function test() { var mydom=document.getElementById("divlist1"); //获取指定ID的DOM对象 var childnode=mydom.firstChild; //获取被删除的节点 mydom.removeChild(childnode); //删除节点 } </script> </head> <body> <form id="form1" runat="server"> <input id="btn1" type="button" value="test" onclick="test()"/> <div id="divlist1"><p>this is test1</p></div> </form> </body> </html>
【运行效果】
初始运行效果
删除后效果
【难点剖析】
实现删除需要指明两个节点,一个是要删除的节点,一个是被删除节点的父节点。使用“removeChild”方法可以实现删除。
【源码下载】
为了JS代码的准确性,请点击:JS实现动态删除页面中的元素 进行本实例源码下载