jquery - 克隆元素并添加和删除？

Question

有没有一种简单的方法可以在单击 button-add 时克隆整个 .box 元素，并将其 append 到后面我还需要 button-remove 来仅删除该框？

HTML

    <input class="button-add" type="button" value="Clone box">

 <div class="form-group box">
    <div class="col-lg-7">
        <p>Article</p>
        <select class="form-control" name="article()">
            <option value="">Smoki Coko Kokos</option>
            <option value="8">Koka Kola</option>
            <option value="10">Cipiripi</option>
        </select>
    </div>
    <div class="col-lg-3">
        <p>Quantity</p>
        <input class="form-control" value="3" name="qty()" type="text">
    </div>
    <div class="col-lg-2">
        <input class="button-remove" type="button" value="Delete box">
    </div>
    </div>

这是我现在所拥有的，但不起作用，

JQUERY

$(document).ready(function() {

    $('.button-add').click(function(){

        //we select the box clone it and insert it after the box
        $('.box').clone().insertAfter(".box");
    });
    });

Answer 1

$('.box').clone() 将克隆页面上具有类 box 的每个元素。您应该指定要克隆哪个框，以及要将其 append 到最后一个框之后:

$('.box:first').clone().insertAfter(".box:last");

此外您可以使用event delegation实现删除按钮:

$(document).on("click", ".button-remove", function() {
    $(this).closest(".box").remove();
});

这些更改的摆弄在这里:http://jsfiddle.net/nbpyyuwu/

但是，这个 fiddle 可能不会做你想要的事情，因为如果你删除所有的盒子，它将不再工作。我建议创建一个隐藏模板，您可以克隆并 append 它(请参阅 fiddle : http://jsfiddle.net/nbpyyuwu/1/ )