how to remove dynamically loaded images in javascript

Question

I'm loading in 3 images (named 1.jpg, 2.jpg, 3jpg) dynamically to 3 divs called "div1", "div2" and "div3".

function loadImages() {

for (var i = 1; i < 3; i++ ) {
var img = document.createElement("img");
    img.src = "vegetables/"+i+".jpg";
    img.id = "a"+i+"";
    var divName = "div"+i+"";
    document.getElementById(divName).appendChild(img);
}

}

That works, but the removing part I can't seem to get to work..

function removeImages() {

for (var i = 1; i < 3; i++ ) {
    var oldImages = "a"+i+"";  
    var divName = "div"+i+"";
    document.getElementById(divName).removeChild(oldImages);
}

}

Thank you.

Answer 1

In remove,

document.getElementById(divName).removeChild(document.getElementById(oldImages));

removeChild takes a DOM element, not an ID.

Answer 2

In your removal, "oldImages" is just a string saying "a1" or whatever. The parameter to .removeChild needs to be an actual DOM element. You need to either find it again (using document.getElementById or by traversing the children of the div node) or keep around the references to the image element.