时间戳

首页 > 解决方案 > 单击按钮删除整个 tr

javascript - 单击按钮删除整个 tr

问题描述

我想tr在按下按钮时将其全部删除press me。我已经尝试过像下面那样做 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>

标签： javascriptjqueryhtml

解决方案

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

$(".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();

推荐阅读