Question

我有一张表，其中有一行和两列（一个文本框和一个按钮）：

$(function() {
  var i = 1;
  
  $('#add').click(function() {
    i++;
    $('#dyn').append('<tr id="row' + i + '"><td><input type="text" name="name[]"></td><td><button type="button" id="' + i + '" class="btn btn-danger remove">x</button></td></tr>');
  });
  
  $(document).on('click', '.remove', function() {
    var id = $(this).attr("id");
    $('#row' + i + '').remove();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <table id="dyn">
    <tr>
      <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
      <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
    </tr>
  </table>
  <button type="button" id="submit"></button>

我想要做的是向表中添加新行并将其删除。问题是，当我尝试删除这些行之一时，我只能删除其中一行，而其他行仍然存在。我在这里做什么错了？

Answer 1

我认为您的意思是这里的ID而不是我

$(document).on('click','.remove',function(){
    var id=$(this).attr("id");
    $('#row'+id+'').remove();
})

Answer 2

问题是因为i的值将仅引用最后添加的行，因此，当您第一次单击删除时，即使不是单击要删除的行，也会删除最后一行。然后第二次单击该行将不再存在，因此似乎什么也没有发生。

一种更好的方法是使用DOM遍历找到被点击的tr的父button，然后将其删除。为此，您可以使用closest()：

$(function() {
  $('#add').click(function() {
    $('#dyn').append('<tr><td><input type="text" name="name[]"></td><td><button type="button" class="btn btn-danger remove">x</button></td></tr>');
  });
  
  $(document).on('click', '.remove', function() {
    $(this).closest('tr').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <table id="dyn">
    <tr>
      <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
      <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
    </tr>
  </table>
  <button type="button" id="submit">Submit</button>
</form>

Answer 3

尝试

editbin /LARGEADDRESSAWARE "C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.6.1 Tools\aspnet_merge.exe"

$(this).parent().parent().remove();

$(function() {
  var i = 1;
  $('#add').click(function() {
    i++;

    $('#dyn').append('<tr id="row' + i + '"><td><input type="text" name="name[]"></td><td><button type="button" id="' + i + '" class="btn btn-danger remove">x</button></td></tr>');

  });
  $(document).on('click', '.remove', function() {
    var id = $(this).attr("id");
    $(this).parent().parent().remove();
  })

});

如何使用jquery动态添加行？

3 个答案: