I need to remove three rows of a table when a link in the first row is clicked.

The rows are created dynamically using jQuery and pre-pended to the table as below.

var ups='';
        ups+='<tr data-file='+file_id+'>';
        ups+='<td width="40%">'+gl_file_name1+'</td><td>'+gl_upload_date1+'</td>';
        ups+='<td>'+gl_upload_desc+'</td>';
        ups+='<td><a href="sym.php?doc_id='+file_id+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" data-file='+file_id+' data-job='+job_id+' class="del2_fl">DELETE</a></td></tr>';
        ups+='<tr><td>'+priority+'</td><td>'+price+'</td><td>'+tender+'</td><td>&nbsp;</td></tr>';
        ups+='<tr class="bottom-row"><td colspan="4">'+notes+'</td><tr>';

        $(ups).prependTo('.app_table');

This is looped for as many times as there are 'files'.

When the DELETE link is pressed I need to delete all three rows. So far I have managed to delete the first row using the code below:

$(this).closest("tr").remove();

I have tried to use .next() but this did not seem to work.

I need to remove three rows of a table when a link in the first row is clicked.

The rows are created dynamically using jQuery and pre-pended to the table as below.

var ups='';
        ups+='<tr data-file='+file_id+'>';
        ups+='<td width="40%">'+gl_file_name1+'</td><td>'+gl_upload_date1+'</td>';
        ups+='<td>'+gl_upload_desc+'</td>';
        ups+='<td><a href="sym.php?doc_id='+file_id+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" data-file='+file_id+' data-job='+job_id+' class="del2_fl">DELETE</a></td></tr>';
        ups+='<tr><td>'+priority+'</td><td>'+price+'</td><td>'+tender+'</td><td>&nbsp;</td></tr>';
        ups+='<tr class="bottom-row"><td colspan="4">'+notes+'</td><tr>';

        $(ups).prependTo('.app_table');

This is looped for as many times as there are 'files'.

When the DELETE link is pressed I need to delete all three rows. So far I have managed to delete the first row using the code below:

$(this).closest("tr").remove();

I have tried to use .next() but this did not seem to work.

• javascript
• jquery
• jquery-selectors
• tablerow

3 Answers 3

Get the row with the link, and from there you can get the next rows and add to the jQuery object, and remove all three in one go:

var tr = $(this).closest("tr");
tr.add(tr.next()).add(tr.next().next()).remove();

By first getting all three rows you don't have the problem that you want to find a row that is next to a row that you have already removed.

Just another idea, you could use a selector like gt.

For example:

$('tr:gt(1)').remove()

Should remove the rows after the first.

$('tr:eq(0)').remove()

Should remove the first row

Reggards

next() ought to work I think. Try saving the reference to the closest tr and removing the others first, e.g.

var $tr = $(this).closest("tr");
$tr.next("tr").remove();
$tr.next("tr").remove();
$tr.remove();

Demo fiddle: http://jsfiddle/rupw/tZMgs/