Question

我有3个文本字段，我想克隆一个删除图标添加按钮单击...到此我的代码工作正常。

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

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

＆＃13;

$('#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;
});

＆＃13;

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

＆＃13;

Answer 1

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

更好的解决方案是将所有3个输入包装在自己的div中，然后使用closest()将其删除，如下所示：

＆＃13;

$('#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();
});

＆＃13;

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

＆＃13;

请注意，我已将type="button"添加到您的<button>元素中，因为它们不会提交任何父form元素。

javascript删除动态添加的div

1 个答案: