Removing The Top Last Message When it gets overflown
===

Here's an example, to explain what I'm trying to achieve

----------------------------------------------------------------
Jimmy: Hey I'm a new message sent from PHP, I'm new and I'm appended onto the message log :)!

Tommy: Hey you! More of us messages are coming, your gonna be removed soon!

Jonny: Right that's it only one more message till Jimmy gets removed because he's knocked out of our box(div).

10 seconds later...

Tommy: Hey you! More of us messages are coming, your gonna be removed soon!

Jonny: Right that's it only one more message till Jimmy gets removed because he's knocked out.
 
Billy: HI GUYS! .. Wait where'd jimmy go?

Jonny: The box became too full, so one of us had to go, Jimmy was at the top,so off he went. Speaking of which, there's goes Tommy! *Tommy gets removed*.

----------------------------------------------------------------------------------------

Using a setInterval, I managed to achieve a similar effect however, it would only remove the BOTTOM one overflown, which was the newest one instead of the top one who's message was "old".

here's the code I created to achieve this...

    var message=document.getElementById('chat_wrap');

    if(message.scrollHeight>message.offsetHeight) {
    Element.remove();
    }


So basically, I want the reverse of what I've done. But I'm not sure how I could achieve this.