Delete previously added element in jQuery

Question

Updated Example

I want to add extra rows via AJAX to a table using tablesorter with filter and sticky header plugins. I can remove all AJAX rows by adding a class to them and using $('.row_selector').empty();. But I want to have another button that only deletes just the previously added row. Is there any way to do that?

I've this with no success:

$('.undo').click(function(){ 
    if ($('.tablesorter tbody tr').length > 1)
        {
           $(this).closest('tr').empty();               
        }; 
});

jQuery:

$('.undo').click(function(){  //Remove previously added row
    if ($('.tablesorter tbody tr').length > 1)
        {
           $(this).closest('tr').empty();               
        }; 
});

$('.remove').click(function(){

    $('.trremove').empty();
    $(".tablesorter").trigger("update");
});

var ajax_request;
function add_Data() {
    $('.area button').click(function(){
    var colspan = $("table.tablesorter tbody tr").length;
            console.log(colspan);
            if(colspan > 10)
            {
                alert("Too Many Rows");
                return false;
            }
          var source = $(this).data('feed');
          if(typeof ajax_request !== 'undefined')
        ajax_request.abort();
        ajax_request =   
        $.ajax({
    url: source,
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
         var title = item.title,
          year = item.year, 
          job = item.Job,
          education = item.Education,
          background = item.Background,
          ingredient = item.Ingredient;
         $(".tablesorter tbody").append('<tr style="display:table-row;" class="trremove"><td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td></tr>');

         });
        },
    });
          $("table").trigger("update"); 

            var sorting = [[2,1],[0,0]]; 
            $(".tablesorter").trigger("sorton",[sorting]); 
        }); 
        return false; 
};

add_Data();

HTML:

<button class="undo">Remove Previous</button>
<button class="remove">Remove</button>
<div class="area"><button>Class B</button></div>
<div class="area"><button>Class C</button></div>
<div class="area"><button>Class D</button></div>


<table class="tablesorter" cellspacing="1">
<thead>
  <tr>
   <th style="visibility:hidden;">first name</th> 
   <th>first name</th>
   <th>last name</th>
   <th>age</th>
   <th>total</th>
   <th>discount</th>
   <th>date</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

Answer 1

As you have a sorter I would have a global var of lastAdded, then in you ajax call you can set it doing this in your success function:

lastAdded = $('<tr style="display:table-row;" class="trremove"></tr>').html('<td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td>');
$(".tablesorter tbody").append(lasstAdded);

Then in your undo you can just use

if (lastAdded != null) {
    lastAdded.remove();
}

Updated fiddle as example (doesn't work as original doesn't work - just to show code)

If you don't want a global class, you can try using an extra class:

In you success:

 $('.lastadded').removeClass('lastadded');
 $(".tablesorter tbody").append('<tr style="display:table-row;" class="trremove lastadded"><td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td></tr>');

In your undo

$('.lastadded').remove();

Example