Delete a specific row from an html table with jquery

Asked

Viewed 2,984 times

5

How to delete the row from this table:

<table>
<thead>
<tr><th>Cod.</th><th>Nome</th><th></th></tr>
</thead>
<tbody>
<tr class="tbl1" data-id="1"><td>1</td><td>João</td><td><a href="#" class="excluir" data-id=1/>EXCLUIR</a></td></tr>
<tr class="tbl1" data-id="2"><td>1</td><td>Ronaldo</td><td><a href="#" class="excluir" data-id=2/>EXCLUIR</a></td></tr>
<tr class="tbl1" data-id="3"><td>1</td><td>Silvia</td><td><a href="#" class="excluir" data-id=3/>EXCLUIR</a></td></tr>
</tbody>
</table>

For example table row id=2 ?

jquery

3 answers

7


To remove dynamically you can do:

$(".excluir").click(function() {
  $(this).parents('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Cod.</th>
      <th>Nome</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>João</td>
      <td><a href="#" class="excluir">EXCLUIR</a>
      </td>
    </tr>
    <tr>
      <th>2</th>
      <td>Ronaldo</td>
      <td><a href="#" class="excluir">EXCLUIR</a>
      </td>
    </tr>
    <tr>
      <th>3</th>
      <td>Silvia</td>
      <td><a href="#" class="excluir">EXCLUIR</a>
      </td>
    </tr>
  </tbody>
</table>

3

Try it this way:

$('[data-id="2"]').remove();

3

To delete a table row by its id:

$('#iddalinha').hide();

But in your case the id you want is a date attribute:

$('tr[data-id="iddalinha"]').hide();

Browser other questions tagged jquery

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