无法删除克隆jquery

Question

我有一个表单，让用户添加或删除html窗体组，通过使用jquery我能够添加克隆，但无法删除添加的表单。这里是我的代码：

<div id="parent"> 
<div class="form-group"><label>Area/Domain:</label><input type="text" name="domain" class="form-control"></div> 
<div class="form-group"><label>Current Level:</label><input type="text" name="cLevel" class="form-control"></div> 
<div class="form-group"><label>Annual Goal:</label><input type="text" name="aGoal" class="form-control"></div> 
<div class="form-group"><label>Remarks:</label><textarea name="remarks" class="form-control" rows="2"></textarea></div> 
</div> 

我的脚本是：

<div id="clone"></div> 
<script> 
$(document).ready(function(){ 
$("#createClone").click(function(){ 
$("#parent").clone().appendTo("#clone"); 
}); 
}); 
</script> 
<script> 
$("#deleteClone").click(function(){ 
$("#parent").clone().remove("#clone"); 
}); 
</script> 
<button id="createClone" type="button" class="btn btn-info">Add Fields</button> 
<button id="deleteClone" type="button" class="btn btn-danger">Delete Fields</button> 

Answer 1

我将使parent成类，然后用$(".parent").remove("#clone .parent:last");

我改变$(".parent").clone()到$(".parent:first")究其原因，所以它每次只克隆1 parent。

$(document).ready(function() { 
 
    $("#createClone").click(function() { 
 
    var clone = $(".parent:first").clone(); 
 
    $("<h5>clone"+$(".parent").length+"</h5>").insertBefore(clone.find(".form-group:first")) 
 
    clone.appendTo("#clone"); 
 
    }); 
 
}); 
 
$("#deleteClone").click(function() { 
 
    $(".parent").remove("#clone .parent:last"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="form-group"><label>Area/Domain:</label><input type="text" name="domain" class="form-control"></div> 
 
    <div class="form-group"><label>Current Level:</label><input type="text" name="cLevel" class="form-control"></div> 
 
    <div class="form-group"><label>Annual Goal:</label><input type="text" name="aGoal" class="form-control"></div> 
 
    <div class="form-group"><label>Remarks:</label><textarea name="remarks" class="form-control" rows="2"></textarea></div> 
 
    <br> 
 
</div> 
 

 
<div id="clone"></div> 
 
<button id="createClone" type="button" class="btn btn-info">Add Fields</button> 
 
<button id="deleteClone" type="button" class="btn btn-danger">Delete Fields</button>