javascript - 单击按钮后删除整个 tr

Question

我想在按下名为 press me 的按钮时删除整个 tr。我已经尝试过像下面这样编写 jQuery 代码，但这根本不起作用。

$(".btnRemove").on("click", function() {
  $(this).parent().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="invTr" data-productId="100">
    <td>nice title</td>
    <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td>
    <td>20</td>
    <td>40</td>
    <td><button data-ripple="" type="submit" class="bg-primary-darker btn btn-danger btnRemove">press me</button></td>
  </tr>

  <tr class="invTr" data-productId="100">
    <td>nice title</td>
    <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td>
    <td>20</td>
    <td>40</td>
    <td><button data-ripple="" type="submit" class="bg-primary-darker btn btn-danger btnRemove">press me</button></td>
  </tr>
</table>

Answer 1

您要删除按钮的父级，但这就是它所在的单元格。要删除该行，您需要删除按钮父级的父级:

$(".btnRemove").on("click", function() {
  $(this).parent().parent().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="invTr" data-productId="100">
    <td>nice title1</td>
    <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td>
    <td>20</td>
    <td>40</td>
    <td><button data-ripple="" type="submit" class="bg-primary-darker btn btn-danger btnRemove">click 1</button></td>
  </tr>

  <tr class="invTr" data-productId="100">
    <td>nice title2</td>
    <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td>
    <td>20</td>
    <td>40</td>
    <td><button data-ripple="" type="submit" class="bg-primary-darker btn btn-danger btnRemove">click 2</button></td>
  </tr>
</table>

或者，您可以使用:

$(this).parents("tr").remove();

或者:

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