新手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>我想每次一点删除按钮，可以删除当前ul中的一个li， 为什么这样写出来的效果每次点一下都删两个，而且删的是位于基数次列的li，也就是每次都删掉1，3，5的li 请问问题出在哪里呀？？》
Ni14浏览 1255回答 2
2回答
-
希卡利
少年郎你想知道为什么每次会删除多个，那是因为你的删除按钮是个循环呀~！你有六个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）
随时随地看视频慕课网APP
相关分类
JavaScript