Remove :first-child from sidebar of titles when scrolling

Question

I've wrote a script that appends a div to a sidebar when an article is scrolled to on the page, the div simply contains the title of the article that is loaded in. This is a part of an infinite scroll functionality that I have been building for a news website.

The issue I have ran into during testing is; when the user scrolls to an article quite far down the page, my sidebar begins to contain a lot of titles, so I'm looking to eliminate the :first-child when the sidebar contains 10 child divs (titles).

jQuery:

if(($('#sideArticles').children().size()) > 10){
var del = $('#sideArticles').find(':first-child');
$('#sideArticles').remove(del);
}

Nothing is happening, nor am I receiving any errors from the console. If anyone could shed some knowledge that'd be much appreciated.

Cheers, Rich.

Answer 1

I would try this:

if(($('#sideArticles').children().size()) > 10){
    var del = $('#sideArticles').children().eq(0);
    del.remove();
}

Answer 2

There is not enough code to really do testes but this could work :

if(($('#sideArticles').children().size()) > 10){
    var del = $('#sideArticles').children().eq(0);
    del.remove();
}