【问题标题】：Clone element and append and remove?克隆元素并追加和删除？
【发布时间】：2014-11-16 22:17:55
【问题描述】：

有没有一种简单的方法可以在单击 button-add 时克隆整个 .box 元素，并将其附加到后面我还需要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");
    });
    });

【问题讨论】：

“一个接一个地附加”需要澄清。
举个例子
...

...
您问题的克隆部分似乎工作正常：jsfiddle.net/j08691/rs5zc7b2

标签： jquery append clone

【解决方案1】：

$('.box').clone() 将克隆页面上每个类 box 的元素。您应该指定要克隆的框，以及要在最后一个框之后附加它：

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

此外，您可以使用event delegation 来实现删除按钮：

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

这里有这些变化：http://jsfiddle.net/nbpyyuwu/

然而，这个小提琴可能不会做你想做的事，因为如果你删除所有的盒子，它就不再起作用了。我建议创建一个隐藏模板，然后克隆并附加（参见小提琴：http://jsfiddle.net/nbpyyuwu/1/）

【讨论】：

不错。这行得通，如果内容最初被隐藏或删除了所有元素，如何首先克隆

【解决方案2】：

你想将元素移动到新的 div 吗？试试这个：

$('.box').detach().appendTo(".box");

编辑：

JSFiddle

【讨论】：

不，我想一个接一个地克隆那个盒子
怎么样：$('.box').clone().appendTo(".box");
试试这个小提琴这是你想要的吗？

【解决方案3】：

点击处理程序需要委托给静态祖先节点（例如document），以便将点击功能（添加和删除）附加到克隆框。

我希望你想要这样的东西：

$(document).ready(function() {
    $(document).on('click', '.button-add', function() {
        $(this).clone().insertAfter(this);//or maybe .insertAfter('.box:last'), as per Ninsly's answer
    }).on('click', '.button-remove', function() {
        $(this).closest('.box').remove();
    });
});

【讨论】：

【解决方案4】：

请检查此链接与演示添加删除 div jquery Here is the JSFiddle link 你也可以查看下面的代码。

$(document).ready(function() {
  var div_clone = null;
  div_clone = $('.template').clone();
  $('.button-add').click(function() {
    //we select the box clone it and insert it after the box
    var _elm = div_clone.clone();
    _elm.find('.box-title').html('Other Address');
    _elm.find("input[type='text']").val("");
    _elm.find('.remove_btn').show();
    _elm.appendTo('#clone_here');
  })

  $(document).on("click", ".remove_btn", function(e) {
    var $e = $(e.currentTarget);
    $e.closest('.template').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="button-add" type="button" value="Clone box">
<div class="form-group box template">
  <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 style="display:none;" class="remove_btn" type="button" value="Delete box">
  </div>
</div>
<div id="clone_here">
</div>

【讨论】：