javascript - 删除以前在 jQuery 中添加的元素

Question

Updated Example

我想使用带过滤器和粘性标题插件的表格排序器通过 AJAX 将额外的行添加到表格中。我可以通过向它们添加一个类并使用 $('.row_selector').empty(); 来删除所有 AJAX 行。但我想要另一个按钮只删除以前添加的行。有什么办法吗？

我没有成功:

$('.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

如果要从表中删除最后一行，可以尝试以下操作:

$('.undo').click(function(){ 
 if ($('.tablesorter tbody tr').length > 1)
    {
       $('.tablesorter tbody tr:last').remove();               
    }; 
});