JQuery :: How To Completely Remove Prepended Text

Whenever I try to .fadeout() or .remove() a a prepended text, it is still there even after I remove it.

Javascript:
$('#body').ajaxStart(function(){$('<span class="loading"></span>').prependTo('#body').fadeIn('slow');});
$('#body').ajaxComplete(function(){$('.loading').fadeOut('slow');});

CSS:
.loading {
background-image: url("..loading.gif");
background-position: top;
background-repeat: no-repeat;
display: block;
height: 15px;
text-align: center;
}

Objective:
Shows the loading image (.loading) before the main content (#body) when the ajax task starts and removes it when the ajax task has been completed. Triggered by an onclick event.

Details:
The code above works. The problem is everytime I click the html element (<li>), it prepends the content from the previous execution. As such, if it has a text "loading..." the next time I click another item from the menu it becomes "loading...loading..." I tried using the .fadeout() but it only hides it. So I try .remove(), same thing happens. Tried using them both, separately, and hand-in-hand, the object still does not get destroyed.

Versions: jQuery 1.5.2