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

Question

我正在尝试制作一个函数（使用javascript），以删除我附加到html中的div的图像，但是我无法获取要删除的图像。 总体思路是无需使用多个div就可以动态地附加和删除图像。 这是附加图像的功能

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

我在函数中（而不是外部）创建img的原因是，我可以将多个新对象附加到div上，如果不这样做，它只是替换图像这是我为删除图像而尝试的操作

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

我无法在removeImage中访问img，因为它不在范围内。 因此，有没有一种方法可以将img传递到removeImage中而不使其成为全局对象，或者有另一种完全不使用添加或删除的方法？

我不知道您是否需要它，但是我在HTML文件中所拥有的只是

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

Answer 1

编辑-添加了Codepen示例：

单击以获取Codepen示例

要使用removeChild（），必须从您要删除的节点的父节点中调用它。 您的函数如下所示：

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

简单地说，您只需要一个参数-所需元素的ID-即可确定其父节点并将其删除。

编辑以供选择：

您可以尝试做的另一件事是让appendImage返回一些内容以供以后引用-您传入的ID或随机数。 可以将其添加到新的img元素中，您可以引用该元素以在将来将其删除。

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');

后来...

removeImage(myImage); 或removeImage('testId123');

Answer 2

您在removeImage函数中定义变量img吗？ 看起来不像您。 在removeImage确保以某种方式找到该img并将其位置存储在变量中，然后可以使用该变量将其删除

Answer 3

您可以尝试计算div中的图像并为每个图像指定一个标识。 这样您就可以知道在需要时要删除哪个图像。

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

您需要遍历DOM才能找到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

以Wongesse所说的为基础

现代：

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;
  }
}