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

Question

我正在尝试创建一个函数（在 javascript 中）删除我附加到 html 中的 div 的图像，但我无法获取我想要的图像去除。总体思路是能够动态附加和删除必须使用多个 div 的图像 w/o。这是附加图像的功能

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 w/o 使其成为全局的，或者可能是另一种完全不同的不使用附加或删除的方式？

我不知道你是否需要它，但我的 html 文件中只有

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

Answer 1

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

Answer 2

编辑 - 添加了 Codepen 示例：

click for Codepen example

要使用 removeChild()，必须从您要删除的节点的父节点调用它。你的函数看起来像这样：

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

在最简单的情况下，您可以只需要一个参数——所需元素的 ID——然后您可以从中确定其父节点并将其删除。

编辑备选方案：

您可以尝试的另一件事是添加 appendImage return 供稍后参考 - 您传入的 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 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;
  }
}

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

How to append and remove images in a div (javascript and html)

html

javascript

image

appendchild

removechild