删除节点中的内容出现的问题。

代码如下：
<div id="one" style="background:#CCC;width:500px;height:300px;"></div>
<input type="button" value="add" id="btn1">
<input type="button" value="delete" id="btn2">
<script>
var add=document.getElementById("btn1");
var del=document.getElementById("btn2");
add.onclick=function(){
var po=document.getElementById("one");
var con=document.createElement("div");
con.innerHTML="hellow world!!";
po.appendChild(con);
}
del.onclick=function(){
var po=document.getElementById("one");
var children=po.childNodes;
for(i=0;i<children.length;i++){
po.removeChild(children[i]);
}
}</script>每次按下add按钮，就增加一个hellow world。每次按下delete就删除所有的hellow world。但是，为什么我每次按下delete不是删除所有的hellow world，而是一部分？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

del.onclick=function(){
    var po=document.getElementById("one");
    var children=po.childNodes; for(i=children.length-1;i>=0;i--){
     alert(i)
        po.removeChild(children[i]);
        }
    }应该从最后一个元素删除，如果从第一个删除的话，会改变原有dom的结构，索引都会改变的
del.onclick=function(){
    var po=document.getElementById("one");
    var children=po.childNodes;
    while(children.length)  po.removeChild(children[0]);
}
//按你意思，可以简化成
del.onclick=function(){
    var po=document.getElementById("one");
    po.innerHTML=""
}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
$(function(){
$("#btn1").click(function(){
$("#one").append("hellow world");
});
$("#btn2").click(function(){
$("#one").empty();
});
})
</script> <div id="one" style="background:#CCC;width:500px;height:300px;"></div>
<input type="button" value="add" id="btn1">
<input type="button" value="delete" id="btn2">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
</head><body>
<div id="one" style="background:#CCC;width:500px;height:300px;"></div>
<input type="button" value="add" id="btn1">
<input type="button" value="delete" id="btn2">
<script type="text/javascript">
var add=document.getElementById("btn1");
var del=document.getElementById("btn2");
add.onclick=function(){
     var po=document.getElementById("one");
     var con=document.createElement("div");
     con.innerHTML="hellow world!!";
     po.appendChild(con);
    }
del.onclick=function(){
     var po=document.getElementById("one");
     var children=po.childNodes;
var p=children.length;
     for(i=0;i<p;i++){
         po.removeChild(children[0]);
        }
    }
</script>
</body>
</html>
如果有子结点就删除，删除后节点的序号变了，建议删除第0个子结点<html>
<head>
</head>
<body>
<div id="one" style="background:#CCC;width:500px;height:300px;"></div>
<input type="button" value="add" id="btn1">
<input type="button" value="delete" id="btn2">
<script>
var add=document.getElementById("btn1");
var del=document.getElementById("btn2");
add.onclick=function(){
    var po=document.getElementById("one");
    var con=document.createElement("div");
    con.innerHTML="hellow world!!";
    po.appendChild(con);
    }
del.onclick=function(){
    var po=document.getElementById("one");
    var children=po.childNodes;
while(po.childNodes && po.childNodes.length>0)
{
po.removeChild(po.childNodes[0]);
}
}

</script>
</body>
</html>
嗯，用了帖子中的三种方法都可以解决：
1.for(i=0;i<children.length;i++){
children[i].innerHTML="";
}2.for(i=children.length-1;i>=0;i--){
        po.removeChild(children[i]);
        }
3.while(po.childNodes && po.childNodes.length>0)
    {
        po.removeChild(po.childNodes[0]);
    }谢谢，各位的帮助