单击 btn jquery 时删除表 tr

Question

我正在 jQuery 中创建一个添加和删除函数，何时minus btn [remove_button]会单击。但它不起作用。我附加了它的工作td时间plus btn [add_button]以及我如何实现删除方法。我的代码在下面，我是 jQuery 的新手，希望如果我错了，开发人员可以帮助解决这个问题。var maxField = 5;var x = 1;$('.add_button').click(function() {  if (x < maxField) {    x++;    newrow = '<tr class="ok"><td><select class="form-control" name="product_name[]" id="product_id" required><option value="14563">Product 1</option><option value="96547">Product 2</option><option value="965489">Product 3</option></select></td><td><input type="tel" class="form-control" name="quantity[]" placeholder="Enter Quantity" /></td><td><button type="button" class="btn btn-danger remove_button"><i class="fa fa-minus"></i></button></td></tr>';    var rowspan = parseInt($('.field_data').attr('rowspan')) + 1;    $('.field_data').attr('rowspan', rowspan);    $('.complaint_table tr:eq(3)').after(newrow);  }});$(".complaint_table").on("click", ".remove_button", function(e) {  e.preventDefault();  $(this.tr).remove();  x--;});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script><table class="table table-striped table-hover table-bordered complaint_table">  <tbody>    <tr>      <td>Company:</td>      <td>        <input class="form-control" type="text" maxlength="50" placeholder="Company" />      </td>      <td>Company RegDate:</td>      <td>        <input class="form-control" type="date" />      </td>    </tr>

Answer 1

问题是因为this在.remove_button点击处理程序中引用了 DOM 元素。他们没有tr财产。

而是获取tr对单击按钮的父元素的引用closest()：

$(".complaint_table").on("click", ".remove_button", function(e) {

  e.preventDefault();

  $(this).closest('tr').remove();

  x--;

});