CODEWITHSUNDEEP
jquerybuttonhtml-table
user1042095
user1042095

Reputation: 21

JQuery table/button delete

I have a table with 4 columns where one of these columns has a button. I wish that when the button receives a click the table row where the button is to be excluded.

Since the table rows are inserted dynamically on click of another button, with this the ID's of the buttons are dynamic which prevents me from using the ID of the button that is on the table as a selector.

Then I would do the following: On the button click I want to find out which row of the table is the button, and then delete this line.

Any suggestions?

Below the table that I am manipulating.

<table id="tbIngredients">
     <thead>
          <tr>
              <th id="cod"> Code </ th>
              <th id="desc"> Description </ th>
              <th id="price"> Price </ th>
              <th id="op"> Operation </ th>
          </ tr>
     </ thead>
     <tbody>
          <tr>
             <td id="tr1"> 1 </ td>
             <td> Ingredient </ td>
             <td> $ 1.00 </ td>
             <td id="td1"> <input type="button" class="delIngredient" value="Excluir     ingrediente"> </ td>
         </ tr>
         <tr id="tr16">
             <td> 16 </ td>
             <td> Papaya </ td>
             <td> £ 01.05 </ td>
             <td id="td16"> <input type="button" class="delIngredient" value="Excluir ingrediente"> </ td>
         </ tr>
     </ tbody>
</ table>

Upvotes: 2

Views: 3087

Answers (3)

martynas
martynas

Reputation: 12300

Try this:

$("#tbIngredients").on("click", ".delIngredient", function() {
    $(this).closest("tr").remove();
});

DEMO

Upvotes: 0

Jim H.
Jim H.

Reputation: 5579

$('.delIngredient').click(function() {
    $(this).parent().parent().remove();
});

Will remove the parent row. Probably not the only way, but it works for your markup.

I think I like Andrews solution better. Then it's not reliant on nesting.

Upvotes: 0

Andrew
Andrew

Reputation: 13853

How about,

$('.delIngredient').click(function(){
  $(this).parents('tr').remove();
});

Missed the dynamic, if you are also adding rows after page loads, you'll need to attach it to the document,

$(document).on('click', '.delIngredient', function(){
  $(this).parents('tr').remove();
});

Upvotes: 2

Related Questions