Javascript 正确删除HTML DOM节点

我正试图创造一个明星闪耀的动画

function ShowStars()
{
    //if ($('img.star').length > 5)
    //  return;

    var x = Math.floor(Math.random() * gameAreaWidth) - 70;
    var y = Math.floor(Math.random() * gameAreaHeight);

    var star = document.createElement("img");
    star.setAttribute("class", "star");
    star.setAttribute("src", imagesPath + "star" + GetRandom(1, 3) + ".png");
    star.style.left = x + "px";
    star.style.top = y + "px";
    gameArea.appendChild(star);
    // Light.
    setTimeout(function () { star.setAttribute("class", "star shown"); }, 0);
    // Put out.
    setTimeout(function () { star.setAttribute("class", "star"); }, 2000);
    // Delete.
    setTimeout(function () { gameArea.removeChild(star); }, 4000);

    setTimeout(function () { ShowStars(); }, 500);
}

它可以正常工作，直到我取消注释下面的代码，该代码应该用于调节星号计数：

//if ($('img.star').length > 5)
//  return;

然后它停止工作，就好像创建的星星没有被移除一样（前5颗星星闪烁，然后什么也没有发生）。为什么jQuery选择器在

gameArea.removeChild（star）之后选择它们？从父节点中删除它们还不够吗

浏览器：谷歌Chrome17

关于，
我看到了一个解决方法：不要动态创建星星，而是将它们插入HTML（
…
，其中N是总计数），然后点亮并熄灭现有节点。不过，我想了解，删除上述问题中的节点有什么问题。
将注释掉的行更改为

if ($('img.star').length > 5) {
  setTimeout(function () { ShowStars(); }, 500);
  return;
}

保持ShowStars递归继续