how to remove dynamically loaded images in javascript

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.

In remove,

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

removeChild takes a DOM element, not an ID.

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.