如何在div中添加和删除图像（javascript和html）

Question

I'm trying to make a function (in javascript) that removes an image I attached to a div in html, I am having trouble getting the image I want to remove. The overall idea is to be able dynamically attach and remove images w/o having to use multiple divs. Here is the function to append the image

function appendImage(imageSource, Id){
    var img = document.createElement("IMG");
    img.src = imageSource;
    document.getElementById(Id).appendChild(img);
}

The reason I create img in the function (instead of outside) is so that I can attach multiple new ones to the div, if I don't it just replaces the image Here is what I'm trying to for the removing the image

function removeImage(imageSource,Id){
    document.getElementById(Id).removeChild(img);
}

I cannot access img in the removeImage because it isn't in the scope. So is there a way to pass img into removeImage w/o making it global or maybe another completely different way not using append or remove?

I don't know if you need it but all i have in my html file is

<div id="image"></div>

Answer 1

Edit - added Codepen example:

click for Codepen example

To use removeChild(), it must be called from the parent of the node you are trying to remove. Your function would look something like this:

function removeImage(id) {
    var elementToBeRemoved = document.getElementById(id);
    elementToBeRemoved.parentNode.removeChild(elementToBeRemoved);
}

At its simplest, you could just require one parameter - the id of the desired element - and from that you can determine its parent node and remove it.

Edit for alternative:

Another thing you could try is have appendImage return something to reference later - either an id that you pass in, or a random number. This can be appended to the new img element, and you can reference that to remove it in the future.

function appendImage(imageSource, containerId, imageId) {
    var img = document.createElement("IMG");
    img.src = imageSource;
    img.setAttribute('id', imageId);
    document.getElementById(containerId).appendChild(img);
    return imageId;
}

function removeImage(imageId) {
    var elementToBeRemoved = document.getElementById(imageId);
    elementToBeRemoved.parentNode.removeChild(elementToBeRemoved);
}

var myImage = appendImage('my.jpg', 'image', 'testId123');

and later on...

removeImage(myImage); or removeImage('testId123');

Answer 2

do you define the variable img in your removeImage function? It doesn't look like you do. In removeImage make sure you find that img somehow and store it's location in a variable that you can then use to remove it

Answer 3

You could try counting the images in the div and giving each image an identity. So that you would know which image to remove when it is neccesary.

function appendImage(imageSource, Id){
    var imagecount = document.getElementById('image').childNodes.length;
    var img = document.createElement("IMG");
    img.setAttribute("id", imagecount + 1);
    img.src = imageSource;
    document.getElementById(Id).appendChild(img);
}
function removeImage(ImageId){
   var elem = document.getElementById(ImageId);
   elem.parentElement.removeChild(elem);
}

Answer 4

You would need to traverse the DOM to find the children of the div.

function removeImage(imageSource,Id){
    var div = document.getElementById(Id);
    for( var i=0; i<div.childNodes.length; i++){
      div.removeChild(div.childNodes[i]); //you may need an if to only remove the images
    }
}

Answer 5

To build on what Wongesse said

Modern:

function removeImage(imageSource,Id){
  var div = document.getElementById(Id);
  var image = div.querySelectorAll('[src="' + imageSource + '"]');

  div.removeChild(image[0]);
}

jQuery:

function removeImage(imageSource,Id){
  $('#' + Id + ' [src="' + imageSource + '"]').remove();
}

IE 8+:

function removeImage(imageSource,Id){
  var div = document.getElementById(Id);
  var images = div.getElementsByTagName('img');

  for(var i = 0; i < images.length; i++){
    if(images[i].src != imageSource){
      // not the image we are looking for
      continue;
    }

    div.removeChild(images[i]);
    break;
  }
}