CODEWITHSUNDEEP
javascriptjqueryhtml
mayua
mayua

Reputation: 101

Delete row in a table by clicking cell in another table

I have two tables: one-column table standing next to the multi-column table. I want to delete a row in a multi-column table by clicking the cell in a one-column table that is standing next to this row.

I am trying to do this by using this code:

$('.my-table').on('click','td .del-row-td',function(e){
  e.preventDefault();
  $(this).closest('tr').remove();
});

Where .my-table is a multi-column table and .del-row-td is a cell in a one-column table. Maybe "closest" does not work if these are two separate objects?

Here is a demo where I am trying to do this. And here is an explanation in the image.

Upvotes: 0

Views: 53

Answers (1)

bresleveloper
bresleveloper

Reputation: 6066

you need to get the index of the one-column tr and remove the matching multi-column tr

$('#table-del tr').click(function(){
  var trIndex = $("tr", $(this).closest("table")).index(this);
  $($('#my-table tr')[trIndex]).remove()
  $(this).remove();
})

updated fiddle (updated to use on)

some nicer code options to delete the matching tr here

Upvotes: 1

Related Questions