Question

我要在按下名为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>

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();

Answer 2

//remove item button action

$( document ).ready(function(){

	$(".btnRemove").on("click", function () {
           if( $(this).parents( "tr" ) ){
              $(this).parents( "tr" ).remove();
           }
	});
  
});

table{
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid silver;
  padding: 8px 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
    <tbody>

        <tr class="invTr" data-productId="100">
            <td>nice tits1</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 baby</button>
            </td>
        </tr>

        <tr class="invTr" data-productId="100">
            <td>nice tits2</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 baby</button>
            </td>
        </tr>

    </tbody>
</table>

单击按钮删除整个tr

2 个答案: