新手dom关于删除子节点问题

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM</title> <style> ul li{ } </style> <script> window.onload=function(){ var oTxt=document.getElementById("Txt1"); var oBtn=document.getElementById("Btn1"); var oUl=document.getElementById("ul1"); var oBtn2=document.getElementById("Btn2"); oBtn.onclick=function(){ var oLi=document.createElement("li"); var aLi=document.getElementsByTagName("li"); oLi.innerHTML=oTxt.value; // oUl.appendChild(oLi); //往后插入元素 if(aLi.length>0){ oUl.insertBefore(oLi,aLi[0]); }else{ oUl.appendChild(oLi); } oBtn2.onclick=function(){ for(var i=0;i<aLi.length;i++){ oUl.removeChild(aLi[0]) } } } } </script> </head> <body> <input type="text" id="Txt1"> <input type="button" id="Btn1" value="添加li"> <input type="button" id="Btn2" value="删除"> <ul id="ul1"> <li>11111<a href="#">隐藏</a></li> <li>阿斯顿发生的萨顶顶<a href="#">隐藏</a></li> <li>zzzzzzzz<a href="#">隐藏</a></li> <li>qqqqq<a href="#">隐藏</a></li> <li>SSSSSSSS<a href="#">隐藏</a></li> </ul> </body> </html>

少年郎你想知道为什么每次会删除多个，那是因为你的删除按钮是个循环呀~！你有六个li 第一次循环后 i == 1 length == 5 第二次 i == 2 length == 4 以此类推你直接写个 if（aLi.length > 0） oUl.removeChild(aLi[0]) ; 直接删除就完事了还有这里 var aLi=document.getElementsByTagName("li"); if(aLi.length>0){ oUl.insertBefore(oLi,aLi[0]); }else{ oUl.appendChild(oLi); } //完全没必要这样写呀oUl.insertBefore(oLi,oUl.childNodes[0]); 就可以完事的，而且你写的这个var aLi=document.getElementsByTagName("li");如果页面上有其他的ul li 是会gg的建议删除节点的时候每次出发都重新获取一次 li 标签的节点 var aLi = oUl.childNodes; if（aLi.length > 0）

新手dom关于删除子节点问题

2回答