点击第一下没有反应,然后再点击一下删除了3个,然后再点击依次删除一个

来源:9-14 删除节点removeChild()

惊悚的窝窝头

2017-11-03 19:41

<!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");
       var len=content.childNodes.length;
       for(var i=0;i<len;i++){
           var x=content.removeChild(content.childNodes[i]);
       }return x;
   }
</script>
<button onclick="clearText()">清除节点内容</button>

</body>
</html>


chrome 报错了给这一句

           var x=content.removeChild(content.childNodes[i]);

 Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

到底哪里有问题呢?

写回答 关注

2回答

  • 惊悚的窝窝头
    2017-11-03 20:56:37

    我自己在本子上划了划,弄明白了,节点的个数在变化,索引值也在变化。最简单的办法就是换成从大到小删除。

  • Electricight
    2017-11-03 19:51:38

    当你删除节点的子节点的时候,节点的子节点个数在不断的变化,所以你删除的效果和你想象中的不一样样,直接暴力解决方式function clearText(){

     var content=document.getElementById("content");

    content.innerHTML="";

    }

    惊悚的窝窝头

    谢谢!

    2017-11-03 20:54:53

    共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题