Question

我有一个表单，允许用户添加或删除html表单组，通过使用jquery我能够添加克隆但不能删除添加的表单。这是我的代码：

<form action="get">
  <button 
    type="submit" 
    class="btn attendBtn" 
    value="{{ item.id }}" 
    name="attend">attend
  </button>
 </form>

我的脚本是：

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

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>

无法在jquery中删除克隆

1 个答案: