AJAX element selection Issue with table row - php

Question

I am trying to ajax delete rows in a table. It is working, except for the fact that it deletes the ENTIRE table... There is a table within the table the code is as follows;
$(document).ready(function() {
$(".delete").bind('click', function(e){
e.preventDefault();
var parent = $(this).parents('tr');
var string = 'id='+ parent.attr('id').replace('record-','') ;
$.ajax({
type: 'POST',
url: 'ajax_delete.php',
data: string,
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function(data) {
if(data.status == 'success'){
parent.slideUp(300,function() {
parent.remove();
});
}else if(data.status == 'error'){
parent.animate({'backgroundColor':'#eeeeee'},300);
} else {
parent.animate({'backgroundColor':'#eeeeee'},300);
}
},
});
});
});
The table layout;
<table class="tab_var1">
<tr>
<td class="tab_var1_pad">
<div class="v_tables">
<table>
<tr>
<td>
Domain Name
</td>
<td>
Stats Overview
</td>
<td>
Remove from CRON
</td>
</tr>
<tr class="record" id="record-1">
<td >
<a href="http://www.challengept.com" target="_blank">challengept.com<a>
</td>
<td >
<table >
<tr>
<td>
Traffic (Month)
</td>
<td>
No. Keywords
</td>
<td>
No. PPC Ads
</td>
<td>
Visibility
</td>
</tr>
<tr>
<td>
1796
</td>
<td>
367
</td>
<td>
0
</td>
<td>
0.0236900
</td>
</tr>
<tr>
<td>
Data Source - UK
</td>
</tr>
</table>
</td>
<td >
Remove
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
If anyone can let me know how I can select a single TR within the ajax that would be a great help. The TR I wish to select is the tr with the class "record" which has an a href button in the last td. I am using select parents tr?

Answer 1

You can use closest for this:
var parent = $(this).closest('tr');
var string = 'id='+ parent.attr('id').replace('record-','') ;
I think you can do it with better way as following:
1. Assign data attr for id field
Remove
2. Get data id
var string = $(this).data('id');

Answer 2

.parents() returns all the parents of the element. You just need to select the immediate parent or closest ancestor tr. Use the following jquery method
var parent = $(this).closest('tr');
See links
https://www.w3schools.com/jquery/traversing_parents.asp
Jquery row selecting in a button onClick