说不上原创吧,是论坛上的大神帮我的,我总结下,列在下面。
我的初衷是,按一次add增加一个hellow world,按一次delete全部删除掉,但按照我的方法是,按一次delete是删除了部分,很是奇怪。
<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.οnclick=function(){
var po=document.getElementById("one");
var con=document.createElement("div");
con.innerHTML="hellow world!!";
po.appendChild(con);
}
del.οnclick=function(){
var po=document.getElementById("one");
var children=po.childNodes;
for(i=0;i<=children.length;i++){
po.removeChild(children[i]);
}
}
</script>
</body>
在论坛发帖,得到了下面3种解决办法:
1.让每个节点的内容为空,就是删除节点中的内容。
for(i=0;i<children.length;i++){
children[i].innerHTML="";
}
2.有子结点就删除,删除后节点的序号变了,应该删除第0个子结点。
while(po.childNodes && po.childNodes.length>0)
{
po.removeChild(po.childNodes[0]);
}
3.如果删除子节点,后续的节点会改变,应该从后往前删除。
for(i=children.length-1;i>=0;i--){
po.removeChild(children[i]);
}