How do I solve this Javascript memory management error?

I have a picture array that is stored globally. Every second I choose a picture on the screen, fade it out, and replace it with a picture from the array. I use: $("#picture" + 开发者_如何转开发picture.id).remove() to remove the current picture from the screen. Then I use

$(".pictureframe").prepend(

<div id="picture+picture.id" class="imageframe" style="opacity:0; left:x px; top:y px;" >
    <img class="image" width="picture.width" height="picture.height" src="picture.source" />
</div>

);

I removed all the escaping to make it easier to read. picture is the object so picture.id is the pictures id. The problem is that having the page open (and the only one open) kills browser memory. I get to 1.4gb usage with just that page. I imagine that the browser is creating a clone of the image every time it gets reinserted. Is there a garbage collector delete function I can call on the DOM elements I removed? How would I do that?

---

The way I would go about doing it is to have all the images there at once, but with all-but-one of them set to display: none, then fade them in/out as needed. This way there's no real DOM manipulation, only styles, and memory won't leak out of your computer's USB ports :p