CODEWITHSUNDEEP
asp.net-mvc-3jquery
ShaneKm
ShaneKm

Reputation: 21328

jquery remove first row in table

I need to have a nice transition where I remove 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

Upvotes: 2

Views: 8953

Answers (3)

M.Mohammadi
M.Mohammadi

Reputation: 1567

Try this:

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

Upvotes: 0

australis
australis

Reputation: 481

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)

Upvotes: 6

codeandcloud
codeandcloud

Reputation: 55200

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();
});

Upvotes: 1

Related Questions