Remove last element after append

I have the following where #maincontent contains some images that will load into #gallery. The problem right now is that if I click on #maincontent img and load different images into #gallery for a lot of times, the loading just got draggier and draggier. Is it because when I click on the next image, it's simply on top of the previous image and the images just pile up over time? I'm not very familiar with .append() and .last() and I'm just wondering how to remove the previously loaded image after the newest image is loaded. I've tried $('img:last-child', this).remove() but it doesn't seem to work, so I just wonder if I'm on the right track.

$('#maincontent img').click(function(){
    $myFile = $(this).attr('src');
    $('#gallery').append('<img src="'+$myFile+'" />');
    $('#gallery img').last().css('display','none').fadeIn();