無法刪除克隆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>