jquery中的.clone()和.remove()方法 [英] .clone() and .remove() method in jquery

问题描述

我的任务是实现功能，当我单击按钮时，它会添加一整行，这是我通过.clone()方法实现的.现在我要删除它.当我单击十字按钮时，则仅删除该行.如图所示:

My task is to achive the functionality, when I click on a button, then it add a full row, which is achived by me by .clone() method. Now I want to delete this. When I click on cross button, then only remove that line. As shown in image:

当我单击十字时，请删除该行.我的代码是:

When I click on cross, then remove that line. My code is:

$(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>

我可以通过单击添加按钮来添加新行，但是无法通过单击十字来隐藏该行.

I am able to add New line by click on add button, but unable to hide that line by click on cross.

注意:仅删除选择了线十字按钮的那条线.

Note: remove only that line, which line cross button is selected.

推荐答案

首先，您需要将克隆更改为:

First, you'll need to change your clone to that :

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

传递true表示它也在克隆事件.

Passing true mean that it is cloning events as well.

然后，在您的删除功能中，您需要使用 this 关键字.此将是单击的按钮.然后，您可以像使用最接近的DOM遍历方法一样删除行:

Then, in your remove function, you'll need to use this keyword. this will be the button clicked. You can then use DOM traversal method like closest to remove your row :

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

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

这篇关于jquery中的.clone()和.remove()方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！