Javascript - Remove li with setInterval

See this too: http://stackoverflow.com/questions/11148066/removechild-loop-exits-before-finish

by katalin_2003

HTML

<ul id="infos-container" style="z-index: 0; position: absolute; top: 27px; right: 0px;">
    <li class="info" style="background-color: #D9EDF7;">Rendering FR ...</li>
    <li class="info" style="background-color: #D9EDF7;">Rendering DE ...</li>
    <li class="info" style="background-color: #D9EDF7;">Rendering BE ...</li>
    <li class="info" style="background-color: #D9EDF7;">Rendering RU ...</li>
    <li class="info" style="background-color: #DFF0D8;">Done rendering RU !</li>
    <li class="info" style="background-color: #D9EDF7;">Rendering US ...</li>
    <li class="info" style="background-color: #D9EDF7;">Rendering NL ...</li>
    <li class="info" style="background-color: #DFF0D8;">Done rendering FR !</li>
    <li class="info" style="background-color: #DFF0D8;">Done rendering DE !</li>
    <li class="info" style="background-color: #DFF0D8;">Done rendering BE !</li>
    <li class="info" style="background-color: #DFF0D8;">Done rendering US !</li>
    <li class="info" style="background-color: #DFF0D8;">Done rendering NL !</li>
</ul>

CSS

ul {
    list-style: none;
}

JavaScript

//var lis = document.querySelectorAll('#infos-container li');
var lis = document.getElementById("infos-container");
/*
var mata = setInterval(function () {
    lis.firstChild.remove();
    console.log(lis.children.length);
    if (lis.children.length === 0) {
        clearInterval(mata);
    }
}, 300);
*/

var infosContainer = document.getElementById("infos-container");
setTimeout(function () {
    var mata = setInterval(function () {
        infosContainer.firstChild.remove();
        console.log(infosContainer.children.length);
        if (infosContainer.children.length === 0) {
            clearInterval(mata);
        }
    }, 500);
}, 3000);