Javascript-форум - Помогите с removeChild, что то происходит вдруг не так

Тут картинки по кругу должны перемещаться, но после какого то цикла идет что то не так, и они начинают пропадать! Не могу разобраться почему!
И показывает ошибку: Uncaught TypeError: Cannot read property 'id' of undefined
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
li
{
width:640px;
height:320px;
float:left;
}
</style>
<script>
function rem ()
{
function removeChildren()
{
node = document.getElementById('test');
var children = node.childNodes;
id = children[0].id;
node.removeChild(children[0]);
}
removeChildren();
removeChildren();
li = document.createElement('li');
if (id == 'img-1')
{
li.id = 'img-1';
li.style.background = 'url(image/slider-1.jpg)';
}
if (id == 'img-2')
{
li.id = 'img-2';
li.style.background = 'url(image/slider-2.jpg)';
}
if (id == 'img-3')
{
li.id = 'img-3';
li.style.background = 'url(image/slider-3.jpg)';
}
test.appendChild(li);
}
</script>
</head>
<body>
<input type="button" onClick="rem ()" value="Далее">
<ul id='test' style="width:1920px">
<li id='img-1' style="background-image:url(image/slider-1.jpg)"></li>
<li id='img-2' style="background-image:url(image/slider-2.jpg)"></li>
<li id='img-3' style="background-image:url(image/slider-3.jpg)"></li>
</ul>
</body>
</html>