问答详情
源自：9-14 删除节点removeChild()

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

<!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(i=0;i<content.childNodes.length;i++)

  {

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

      x=null;

  }

}

</script>

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


提问者：天问_0004 2014-11-13 22:51

个回答

  • qq_小緈運_0
    2018-05-05 15:30:30

    看完你们的见解，明白了好多，谢谢各位大神

    0
  • 今世缘0
    2017-05-26 19:33:50

    小于飞飞大神学习时间太————了吧，算了下，每天学习24小时，一年到头不休息，也要学5年多啊。

    0
  • 今世缘0
    2017-05-26 19:31:41

    小于飞飞大神学习时间太————了吧，算了下，每天学习24小时，一年到头不休息，也要学5年多啊。

    0
  • BaconNUDT
    2017-02-25 23:31:30

    for(var i=0; i<content.childNodes.length;){
      content.removeChild(content.childNodes[i]);
  }

    超级简单，或者用while也可以

    0
  • 水秋玄
    2016-12-05 11:35:16

    研究了一下，这个问题其实主要的原因有两个：

    1、 content.childNodes.length 不能直接写进循环条件里，因为每次执行后子节点的数量都会变，所以应该在循环前先把子节点数量赋值给一个变量，再放到循环条件里。

    2、最后删除节点 content.removeChild(content.childNodes[0]); 这里的子节点下标也不能是循环里的自增变量（i），因为第一次循环删除了第1个子节点，那么第2个子节点就会变成第1个子节点，第3个子节点会变成第2个子节点，以此类推……
    当第二次循环时 i=1，也就是删除第2个子节点（原第3个节点），是会跳过1个节点删除的，因为循环条件在自增，而节点是在递减。

    比如，原来5个子节点分别是：

    html（删除）

    php（跳过，第2次点击才会被删除）

    javascript（删除）

    jquery（跳过，第3次点击才会被删除）

    java（删除）


    最后代码：

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


    0
  • qq_谜离_03319966
    2016-11-03 14:28:13

    兼容浏览器一次删除一个
<!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>
<p id="xyz"></p>

<script type="text/javascript">
function clearText() 
{
  var content=document.getElementById("content");
  // 在此完成该函数
  var array_length=content.childNodes.length;
  for(var i=0;i<array_length;i++)
  {
      if(content.childNodes[0].nodeType==1)
        {
           var x = content.removeChild(content.childNodes[0]);
            document.getElementsByTagName("p")[0].innerHTML+="删除元素:"+x+"<br/>"+"删除元素的内容:"+x.innerHTML+"<br/><br/>";
            break;
        }
    else{
            var x=content.removeChild(content.childNodes[0]);
            document.getElementsByTagName("p")[0].innerHTML+="删除元素:"+x+"<br/>"+"删除元素的内容:"+x.innerHTML+"<br/><br/>";
        }
  }
}
</script>

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



</body>
</html>


    0
  • 桃太郎
    2016-10-29 12:39:05

    大言不惭次，哈哈。搞懂这个这节就可以出师了。
    <div id="content">1
      <h1>html</h1>2
      <h1>php</h1>3
      <h1>javascript</h1>4
      <h1>jquery</h1>5  
      <h1>java</h1>6  
    </div>
    <script type="text/javascript">
    var content=document.getElementById("content");
    var x=content.childNodes;
    function get_nextSibling(n){
        var x=n.nextSibling;
        while(x && x.nodeType!=1){  
            x=x.nextSibling;    
        }    
        return x;       
        }     
    function clearText() {
        nodel=x.length
        for(var i=0;i<nodel;i=i+10){           
            var y=get_nextSibling(x[i]);                
            if(y!=null){
                content.removeChild(y);                 
             }else{
              document.write("<br>已经是最后一个节点");       
             }
        }   
    }
    </script>  
    <button onclick="clearText()">清除节点内容</button>

    0
  • 我不是林俊杰
    2016-10-13 08:49:52

     var jj = content.childNodes;

      for(var i=0;i<jj.length;)

      content.removeChild(jj[i]);

     

      return clearText;

    }   i不要自加就可以做到一键清除了


    0
  • Hbrsql
    2016-10-10 11:01:19

    谢谢分享。

    0
  • 人木言若
    2016-09-11 17:01:23

    这样可以清楚得看到共清除了11个节点，将注释取消就可以每次清除一个h1节点，将break注释可以一次全清

    function clearText() {

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

      // 在此完成该函数

      x=content.childNodes;

      for(i=0;i<x.length;i++){

            //   if(x[i].nodeType!=1){

            //           continue;

            //   }else{

                       y=content.removeChild(x[i]);

                       document.getElementById("chakan").innerHTML=y.innerHTML;

                    break;

            //    }     

        } 

    }


    0
  • 无知的狗3576298
    2016-08-08 17:09:39

    不能用i++,因为一共有11个节点，往往你运行到一半的时候就会停止了，那是因为你把某个节点删除之后，后面的节点就会往前排。

    content.childNodes[0]删掉后，content.childNodes[1]就变成了content.childNodes[0]，然后你下一步删掉的是content.childNodes[1]，就是原来的content.childNodes[2]，以此类推就会造成一次性删不完的结果。

    0
  • 慕粉3409898
    2016-07-31 14:58:43

    感谢大神解惑

    0
  • 下午茶3540555
    2016-07-28 16:23:53

    //一次全都删完

    <script type="text/javascript">

    function clearText() {

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

      // 在此完成该函数

      var hs=content.childNodes;

      for(var i=0;i<hs.length;i++){

     if(hs[i].nodeType==1){

      var fn=hs[i].firstChild;

          var a=hs[i].removeChild(fn);

      a=null;

     }

     }

    }

    </script>


    1
  • Demon丶Y
    2016-07-13 12:09:52

    http://img.mukewang.com/5785bee400012abf05030406.jpg加一个clearText();在for里面可以完成一次删除  而且很简单

    1
  • 黑色旋风
    2016-06-24 09:04:39

    while(content.childNodes.length) {
    content.removeChild(content.lastChild);
  }

    这样不是最简单？（抖个机灵跑

    5
  • 慕仰6432972
    2016-06-06 22:20:30

    所以你们在都用了答主的代码后难道问题都解决了？我怎么还是一次性删除三个？

    0
  • 风_起
    2016-04-13 23:57:49

    上面说的废话一大堆：出现要点击多次的情况才能删除的情况，本质原因，都是你忽略了childNodes是一个会实时更新的数据结构（当你对目标节点进行操作的时候），childNodes is live list。

    0
  • 深山小童
    2016-04-08 21:30:04

    节点删除、添加是实时反映在节点树中的，这也是为什么说诸如childNodes获取到的是类似数组的nodeList，因为跟数组是不一样的。

    0
  • qq_发条橙子_0
    2016-03-06 18:45:11

     for(var i=0;i<num;i++){

          content.removeChild(oh[0]);

      }

    把i换成0就可以了,list是不断推进的，不理解的可以开chrome调试面板看每一步参数的值

    0
  • 墨韵拓风华
    2016-02-28 16:07:25

    <script type="text/javascript">

    function clearText() {

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

      // 在此完成该函数

      var len=content.childNodes.length

      for(i=0;i<len;i++){

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

          document.write("删除节点的内容为："+x.innerHTML+"</br>");

      }

    }

    为什么在IE浏览器中显示的一直都是  undefined，并且只有一行，但是在其他的浏览器中显示的都正常，共有11行？

    效果如下图：

    56d2a98500012d2a02570239.jpg

    56d2a985000144c705000314.jpg


    0
  • prettywinter
    2016-02-17 15:33:51

    i值只是代表循环的次数，并不参与子元素的遍历；每次做删除操作的时候，只要删除第一个节点就可以了。

    0
  • glenhappy
    2016-02-17 09:26:24

    没图没真相，画个图验证一下，分分钟搞定，说了一大堆。画图之后总结一句：removeChild会删除对应位置的节点并且进行重新索引（也就是按照0、1、2.....的顺序），结果导致长度和删除节点的位置变化。

    所以始终删除第一个或者最后一个才没有问题。否则就会出错：

    始终删除第一个：

    nodel=content.childNodes.length

      for(i=0;i<nodel;i++)  {  

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

       }

    囧，说了半天也不知道用什么画图，还是在笔记本上面画的。。。

    0
  • really4you
    2016-01-18 12:04:59

    果然还是数组长度问题，本以为在循环里会很方便的表示长度，却忽略了一增一减的问题，棒棒哒！

    0
  • 吾爱吾师
    2015-12-09 15:06:32

    点击第一次，删除3个；同理，点击第二次，只删除1个；再点击一次，删除最后1个(也是只删除一个)。所以事实上一共是需要调用3次函数才删除完数据

    0
  • easyschen
    2015-10-28 14:35:51

    for循环里面为什么非要写：

    for(i=0;i<content.childNodes.length;i++)
  {
      var x=content.removeChild(content.childNodes[i]);
  }

    不能直接写成：

    conten.removeChild(content.childNodes[i]);

    吗？

    0
  • 慕码人3910529
    2015-10-08 18:22:41

    马马马！果然老师知道问题所在，我还正纳闷怎么要点击好几下！！！

    0
  • 黑V先生
    2015-09-24 16:12:03

    倒序删除：

    function clearText() {

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

      for(i=content.childNodes.length-1;i>0;i--){

        var u = content.childNodes[i];

        if(u && u.nodeType==1){

            content.removeChild(u);

            console.log(u);

            break;

        }

      }

    }

    顺序删除：

    function clearText() {

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

      for(i=0；i<content.childNodes.length;i++){

        var u = content.childNodes[i];

        if(u && u.nodeType==1){

            content.removeChild(u);

            console.log(u);

            break;

        }

      }

    }


    0
  • 鲜衣
    2015-09-09 01:40:30

    好腻害

    0
  • 慕盖茨9705228
    2015-08-09 20:13:05

    解释的好清楚，厉害

    0
  • 叛逆春
    2015-08-07 11:08:11

    为什么第一次点没反应呢 还是没懂  


    0