克隆元素并追加和删除？

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来实现remove按钮：

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

请请与演示此链接，添加删除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>