Javascript delete html table row

Question

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.

Answer 1

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();});

Answer 2

将其放入按钮的onclick处理程序中：

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

Answer 3

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!