javascript删除动态添加的div

Question

我有 3 个文本字段，我想在单击“添加”按钮时使用一个删除图标进行克隆 ...到目前为止，我的代码工作正常。

现在我想在单击删除按钮时删除该特定 div 的最后 3 个文本字段...但是我的代码删除了我表单中所有动态添加的文本字段..

请帮我解决这个问题....

$('#add_exercise').on('click', function() {
  $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
  $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
  $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><button class="remove">x</button></div>');
  return false;
});

$('#exercises').on('click', '.remove', function() {
  $(this).parents("#exercises").remove();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
  <div class="exercise">
    <input type="text" name="exercise[]">
    <input type="text" name="exercise[]">
    <input type="text" name="exercise[]">
  </div>
  <button id="add_exercise">add exercise</button>
  <button class="remove">x</button>
</fieldset>

Answer 1

问题出在您对 .parents('#excercises') 的使用上因为这会选择顶级容器并将其删除。

更好的解决方案是将您附加的所有 3 个输入包装在它们自己的 div 中，然后使用 closest() 删除它，像这样:

$('#add_exercise').on('click', function() {
  $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><button type="button" class="remove">x</button></div>');
});

$('#exercises').on('click', '.remove', function() {
  $(this).closest(".exercise").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
  <div class="exercise">
    <input type="text" name="exercise[]">
    <input type="text" name="exercise[]">
    <input type="text" name="exercise[]">
    <button type="button" class="remove">x</button>
  </div>
  <button type="button" id="add_exercise">add exercise</button>
</fieldset>

请注意，我添加了 type="button"给你的<button>元素，因为对他们来说不提交任何 parent 是有意义的 form元素。