CODEWITHSUNDEEP
javascripthtml-table
user441521
user441521

Reputation: 6998

Javascript delete html table row

I dynamically create an html table and one of the cells in each row stores a button that I want to delete that row when pressed. What are my options in knowing what table row to delete from the delete button pressed?

Am I somehow able to get the row that the button is in? Maybe then inside the click I could use the events 'this' property to get the button and then find out which cell it's in, and from there which row that cell is in? Not sure how I'd go about doing that though.

Upvotes: 0

Views: 197

Answers (3)

user1032531
user1032531

Reputation: 26281

Can be done with native JS, but here is a jQuery solution. Be sure to clone(true) to ensure your events are preserved.

<tr><td>hello</td><td><span class="deleteMe">Delete</td></tr>

$(".deleteMe").click(function(){$(this).parent().parent().remove();});

Upvotes: 1

Givius
Givius

Reputation: 1008

if you are using jQuery this will be a sample code on how you can achieve this.

$('#my_table_id').on('click', 'button', function() {
    $(this).closest('tr').remove();
});

hope this helps, best!

Upvotes: 1

Matthew Dean
Matthew Dean

Reputation: 552

Put this in the button's onclick handler:

this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

Upvotes: 1

Related Questions