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>元素中,因为它们不提交任何父form元素是有意义的.