How to delete the last row from the table?

Asked

Viewed 742 times

2

<table class="table">
  <thead>
    <tr>
        <th>#</th>
        <th>Id.</th>
        <th>Descrição</th>
        <th>Qtd.</th>
        <th>Unitário</th>
        <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th> 1 </th>
      <td> 10</td>
      <td> 20</td>
      <td> 10 </td>
      <td> 30 </td>
      <td> 300 </td>
    </tr>
    <tr>
      <th> 2 </th>
      <td> 40</td>
      <td> 50</td>
      <td> 10 </td>
      <td> 60 </td>
      <td> 600 </td>
    </tr>
  </tbody>
</table>
<button 
  type="button" 
  class="btn" 
  id="btnexcluirultima">ExcluirUltimaLinha</button>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
  $("#btnexcluirultima").on('click', function(){
    //Excluir a ultima linha da tabela
    $(".table td").closest('td').remove();
  });

I just need to delete the last row from the table! As I do, kindly, as I did, it excludes all the rows of the table..., from now on, thank you!

2 answers

3


Use the selector :last. To delete a row you select tr, and not td:

$("#btnexcluirultima").on('click', function(){
    //Excluir a ultima linha da tabela
    $(".table tr:last").remove();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
        <th>#</th>
        <th>Id.</th>
        <th>Descrição</th>
        <th>Qtd.</th>
        <th>Unitário</th>
        <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th> 1 </th>
      <td> 10</td>
      <td> 20</td>
      <td> 10 </td>
      <td> 30 </td>
      <td> 300 </td>
    </tr>
    <tr>
      <th> 2 </th>
      <td> 40</td>
      <td> 50</td>
      <td> 10 </td>
      <td> 60 </td>
      <td> 600 </td>
    </tr>
  </tbody>
</table>
<button 
  type="button" 
  class="btn" 
  id="btnexcluirultima">ExcluirUltimaLinha</button>

  • 1

    Thank you so much for your help! I already added the code here and solved my problems! Thank you dvd, i am waiting the remaining 10 minutes to mark your response.

1

$(function () {

    $('#btnexcluirultima').on('click', function () {
        var trs = $('.table').find('tr');

        if (trs.length > 1)
          trs.last().remove();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
        <th>#</th>
        <th>Id.</th>
        <th>Descrição</th>
        <th>Qtd.</th>
        <th>Unitário</th>
        <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th> 1 </th>
      <td> 10</td>
      <td> 20</td>
      <td> 10 </td>
      <td> 30 </td>
      <td> 300 </td>
    </tr>
    <tr>
      <th> 2 </th>
      <td> 40</td>
      <td> 50</td>
      <td> 10 </td>
      <td> 60 </td>
      <td> 600 </td>
    </tr>
  </tbody>
</table>
<button 
  type="button" 
  class="btn" 
  id="btnexcluirultima">ExcluirUltimaLinha</button>

  • 1

    Thank you @Marcelo, I adapted the checker code if you have lines to remove before performing the function. Thank you! I’ve posted as best response to previous, but gave a vote for you because it is fair and you helped me a lot. Thanks!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.