点击按钮时删除表格中的行JQuery

Question

我正在使用jQuery创建一个添加和删除功能，当点击 减少按钮 [remove_button] 时它不起作用。 当点击 增加按钮 [add_button] 时，我正在附加 td，它能正常工作，但我该如何实现删除方法。

我的代码如下，我是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>
    <tr class="complaint_table">
      <td rowspan="10" class="field_data">Products<span style="color: red; font-size: 14px;"> *</span>:</td>
      <td>
        <select class="form-control" name="product_name[]">
          <option value="14563">Product 1</option>
          <option value="96547">Product 2</option>
          <option value="965489">Product 3</option>
        </select>
      </td>
      <td><input class="form-control" type="number" maxlength="2" minlength="1" name="quantity[]" /></td>
      <td><button type="button" class="btn btn-success add_button"><i class="fa fa-plus"></i></button></td>
    </tr>

- John Cart

---

@RoryMcCrossan的回答可以解决您删除行的问题，但仅供参考，我也认为您的添加方法无法按预期工作。至少在当前提供的代码中，表格单元格中没有第4个tr（即 ... tr:eq(3)）。 - SMAKSS

Answer 1

问题是因为在 .remove_button 的点击处理程序中，this 指的是DOM元素。它们没有 tr 属性。

取而代之的是，使用 closest() 来获取对应于被点击按钮的父级 tr 元素的引用：

$(".complaint_table").on("click", ".remove_button", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
  x--;
});

- Rory McCrossan