HTML

Question

是否有一种简单的方法可以在点击.box上克隆整个button-add元素，然后将其追加我还需要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克隆每个元素。您应指定要克隆的框，以及要在最后一个框之后附加它的框：

$('.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/）

Answer 2

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

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

编辑：

JSFiddle

Answer 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();
    });
});

Answer 4

请使用demo检查此链接以添加删除div jquery Here is the JSFiddle link您也可以查看以下代码。

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

克隆元素并追加并删除？

HTML

JQUERY

4 个答案: