AJAX element selection Issue with table row

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 >
                <a href="#" class="delete btn-small btn-extra">Remove</a>       
     </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

<a href="#" class="delete" data-id="1">Remove</a>  

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