                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

删除节点removeChild（）章节的一些问题！！！

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
for(var i=0;i<content.childNodes.length;i++){
content.removeChild(content.childNodes[i]);
}
}
</script>

<button onclick="clearText()">清除节点内容</button>

</body>
</html>

为什么我这么写，点击清除节点内容按钮时，点击第一遍没有反应，第二遍减少前面3个li，第三遍减少第四个li，第四遍在减少第五个li，求解释，我该怎么改可以一下子全部删除？大神快出来，

guaguaerhao

2016-09-05

源自：JavaScript进阶篇 9-14

关注问题我要回答

774

操作

收起

2 回答

楠木楼林3812467 回答被采纳 +3 积分
2016-09-18

function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数
  for(var i=0;i<content.childNodes.length;i++){
  if(content.childNodes[i].nodeType!=1){
      continue;
      }
  else{
    content.removeChild(content.childNodes[i]);
      }
  }
}

以上可以达到一次清除效果。

在ie下默认是5个子节点，而其他浏览器默认是11个子节点

<div id="content">    文本
  <h1>html</h1>       文本
  <h1>php</h1>        文本
  <h1>javascript</h1> 文本
  <h1>jquery</h1>     文本
  <h1>java</h1>       文本
</div>

按照你的写法，第一次调用clearText()删除的是文本，而每循环一次，length都在减小，所以一次不能清除所有，建议可以看一下置顶答案，那个讲解的比较详细啦。