单击 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) {&nbsp; e.preventDefault();&nbsp; $(this).closest('tr').remove();&nbsp; x--;});