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>

我能够通过点击添加按钮来添加新行，但无法通过点击叉号来隐藏该行。

注意：只删除选择了叉号的行。

- sonalgoyal

Answer 1

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

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

将true传递表示它也克隆事件。

然后，在您的删除函数中，您需要使用this关键字。this将是被单击的按钮。然后，您可以使用DOM遍历方法（如closest）来删除行：

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

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

- Karl-André Gagnon

---

你肯定可以，是什么？ - Karl-André Gagnon

为什么我们要使用 .clone(true) ？而不是 .clone()？ - sonalgoyal

正如答案中所说，“传递true意味着它也克隆事件。” 如果不传递true，则删除按钮将没有任何处理程序。 因此，它无法捕获单击事件。 - Karl-André Gagnon

你可以使用事件委托(.on())，但我建议使用clone true，因为它更快！ - Karl-André Gagnon

@Karl-AndréGagnon，我一直使用委托（.on()），所以感谢您解释了将true传递给clone()的用法。 - Chris22

Answer 2

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

$(document).ready(function () {

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

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

})

- Gareth James