Удалить весь tr один раз нажмите кнопку

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>