jquery - 无法在 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>