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

Question

我的任务是实现功能，当我点击一个按钮，然后它添加一个完整的行，这是由我通过.clone（）方法实现的。现在我要删除它。当我点击十字按钮时，只删除该行。如图所示：

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

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

我可以通过点击添加按钮添加新行，但无法通过点击十字架来隐藏该行。

注意：只删除该行，选择了哪个行十字按钮。

Answer 1

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

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

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

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

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

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

Answer 2

或者，您可以将事件绑定到容器，如下所示：

$(document).ready(function () {

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

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

})