jquery中的.clone（）和.remove（）方法

我的任务是实现功能，当我点击一个按钮时，然后添加一个完整的行，这是由我通过.clone（）方法实现的。现在我想删除这个。当我点击十字按钮时，只能删除那一行。如图所示： enter image description here jquery中的.clone（）和.remove（）方法

当我点击十字，然后删除该行。我的代码是：

$(document).ready(function() { 

    $("button#add").click(function(){ 
    $(".abcd:last").clone().appendTo(".wrapper"); 
}); 
$(".glyphicon-remove").click(function() { 

     $(".abcd:last").remove(); 
    }); 

});

HTML：

<div class="wrapper"> 
      <div class="form-group abcd" id="abcde">  
      <div class="col-sm-12" > 
       <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday</a></li><li class="week"><a href="#">Tuesday</a></li> 
        <li class="week"><a href="#">Wednesday</a></li><li class="week"><a href="#">Thusday</a></li> 
        <li class="week"><a href="#">Friday</a></li><li class="week"><a href="#">Saturdayy</a></li> 
        <li class="week"><a href="#">Sunday</a></li> 
       </ul> 
      </div> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday-saturaday</a></li> 
       </ul> 
      </div> 
      <label for="exampleInputEmail1"> : </label> 
       <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;"> 
        <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li> 
        <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>     
        <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>     
        <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>     
       </ul> 
      </div> 
       <label for="exampleInputEmail1"> to </label> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday-saturaday</a></li> 
       </ul> 
      </div> 
      <label for="exampleInputEmail1"> : </label> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;"> 
        <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li> 
        <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>     
        <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>     
        <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>     
       </ul> 
      </div> 
       <span class="glyphicon glyphicon-remove"></span> 
      </div> 
     </div> 
     </div> 
    </form> 

    <button type="button" id="add" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Add</button> 
    <button type="button" id="remove" class="btn btn-default dropdown-toggle" data-toggle="dropdown">remove</button>

我能够通过点击Add按钮添加新的线，但无法掩饰通过点击交叉该行。

注意：只删除那一行，选择哪一行十字按钮。

来源

2013-12-17 sonalgoyal

首先，你需要将自己的克隆更改为：

$(".abcd:last").clone(true).appendTo(".wrapper");

传递true意味着它是克隆事件也是如此。

然后，在您的删除功能中，您需要使用this关键字。 this将被点击的按钮。然后，您可以使用DOM遍历方法类似最接近删除您行：

$(".glyphicon-remove").click(function() { 

    $(this).closest(".abcd").remove(); 
});

来源

2013-12-17 13:25:16

不客气。 –

你确定可以，它是什么？ –

为什么我们使用.clone（true）？而不是.clone（） – sonalgoyal

或者，你可以将事件绑定到这样的容器：

$(document).ready(function() { 

    $("button#add").click(function() { 
      $(".abcd:last").clone().appendTo(".wrapper"); 
    }); 

    $(".wrapper").on('click', '.glyphicon-remove', function() { 
      $(".abcd:last").remove(); 
    }); 

})

来源

2013-12-17 13:32:38

jquery中的.clone（）和.remove（）方法

回答

相关问题