jquery增加删除html标签属性|jQuery增加删除HTML标签实例详解

更新时间:2018-09-14    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

昨天在写 jQuery 的时候碰到个小问题纠结了我蛮久,后来在 foxling 的指点下才知道是那么一回事。

问题是这样滴,有一个 UL 列表,在某个事件响应之后要把 UL 列表里面的 LI 内容给逐行移除掉,于是有了下面的 HTML 代码:

 代码如下


       1
       2
       3
       4
       5

    删除

    以及下面的 JavaScript 代码:

     代码如下 $("#del").click(function(){
       var list = $("#test");
       var len = list.find("li").length;
     
       for(var i = 0; i < len; i++){
          list.find("li:eq("+ i +")").remove();
       }
    });

    我刚写完的时候觉得逻辑很合理,应该没什么问题,先计算出 UL 标签里面有多少个 LI ,然后利用 For 循环逐个把里面每个 LI 的内容移除掉,但是代码一执行的时候,问题就出来了,它并没有把里面的内容全部移除掉,而是还有一些 LI 遗留在页面上。

     代码如下





    Insert title here
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    $(function(){
     $("#del").click(function(){
      var list = $("#test");
      var len = list.find("li").length;
      
      for(var i = 0; i < len; i++){
       list.find("li:eq("+ i +")").remove();
      }
     });
    });
    </script>



       1
       2
       3
       4
       5
       6
       7
       8
       9
       10

      删除

      后来在 foxling 的指点下,才得知这其中的原因,就是当 i 等于 0 的时候,这时是正确的删除了第一个 LI 标签(其索引为 0);当 i 等于 1 的时候,原来列表中的第 2 个 LI 标签的索引由于前一个 LI 标签被删除的原因从 1 变成了 0,所以该 LI 标签并没有被移除,而此时被移除的是原来列表中的第 3 个 LI 标签,此时它的索引已变为 1 了,如此循环……这就是为什么执行完该 for 循环之后还有一些内容没有被移除的原因了。

      上面的 JavaScript 只要修改一点点的地方就 OK 了:

       代码如下

      $("#del").click(function(){
         var list = $("#test");
         var len = list.find("li").length;
       
         for(var i = 0; i < len; i++){
            list.find("li:eq(0)").remove();//因为每次循环删除一个 LI 标签后,跟在其后的 LI 标签的索引都变为了 0
         }
      });


       代码如下


















    • 再看执行js后效果:












    • 对比一下就知道啦.li的id为fileid18的被删除了.
      主要代码如下:

       代码如下

      $("li").remove("#fileid"+fid);


      例2

       代码如下




      <script src="js/jquery.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(document).ready(function(){
        var spotMax = 3;
        if($("div.spot").size() >= spotMax) {$(obj).hide();}
        $("input#add").click(function(){     addSpot(this, spotMax);
        });
      });

      function addSpot(obj, sm) {
      $("div#spots").append(
          "" +
          " " +
          " " +
          "  " +
          "")
        .find("input.remove").click(function(){
          $(this).parent().remove();
          $("input#add").show();
        });

        if($("div.spot").size() >= sm) {$(obj).hide();}
      };
      </script>



       
         

       
       

      <script>
        $("#send").click(function(){
        alert("Demonstration Only: submit disabled");
      });
      </script>

      本文来源:http://www.bbyears.com/wangyezhizuo/44345.html