jQuery .remove() and last-child not working as expected

Question

I've got this code which is working ok. The new piece of data is coming in ok but when the number of p's gets to 3, nothing happens. The last item doesnt get removed and no new items get appended.

Any ideas?

setInterval(function() {
              $.post(
                'json.php', 
                function(data){
                    $('#tweetBox').append('<p>' + data + '</p>');
                    var list = $('#tweetBox p').length;
                    if (list > 3){
                        $('#tweetBox p:last-child').remove();
                    }               
                }
            );
        }, 5000);

Answer 1

The last item doesn't get removed and no new items get appended.

That indicates that the new item gets appended but removed instantly. You want to reverse the order:

var list = $('#tweetBox p').length;
if (list === 3){
    $('#tweetBox p:last-child').remove();
}
$('#tweetBox').append('<p>' + data + '</p>');