jquery remove first row in table

I need to have a nice transition where I re开发者_StackOverflowmove the first row and append to a table new item.

    $.getJSON('/Home/GetRecentPosts/', { count:1 }, function(data) {
      $('#recentPosts tr:first').fadeOut(2000);
      $('#recentPosts').append($('<tr><td>'+data[0].SchoolName+'</td></tr>').hide().fadeIn(2000));
    });

this works the first time i execute getJson only. Please help. thanks

I've tried to separate each item of functionality you want onto a separate line. If this isn't what you are after, then hopefully it shouldn't be to hard to adjust the below code to suit your needs.

$.getJSON(
    '/Home/GetRecentPosts/',
    { count:1 },
      removeFirstRowAndAppendNewItem(data)
      );

function removeFirstRowAndAppendNewItem(data)
{
    console.log("in callback"); // to confirm we have reached here
    $('#recentPosts tr:first').fadeOut(2000, function() {
        $('#recentPosts tr:first').remove();
        newRow = $('<tr><td>'+data[0].SchoolName+'</td></tr>').hide();
        $('#recentPosts').append(newRow)
        newRow.fadeIn(2000));
    });
}

Basically:

• Fade out the first row
• Remove the first row from the DOM
• Create a new element, with styling that hides it
• Append the new element to the table
• Fade in the new element

(Note: it's possible to combine these steps together)

Try this.

$('#recentPosts tr:visible:first').fadeOut(2000);

Because

$('#recentPosts tr:first').fadeOut(2000);

would have hidden the first element at the first JSON call. Now you are trying again to fadeOut the invisible first element. So you could use a :visible filter to achieve the expected result.

Alternatively, if you wanna remove the element from DOM, try this

$('#recentPosts tr:first').fadeOut(2000, function(){
    $(this).remove();
});

Try this:

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});