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

【问题标题】：How to append and remove images in a div (javascript and html)如何在 div 中添加和删除图像（javascript 和 html）
【发布时间】：2016-06-14 18:14:30
【问题描述】：

我正在尝试制作一个函数（在 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 而不使其成为全局变量，或者可能是另一种完全不同的方式而不使用 append 或 remove？

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

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

【问题讨论】：

你能分享可执行的 demo/sn-p 或JSFiddle 吗？
removeImage 怎么称呼？

标签： javascript html image appendchild removechild

【解决方案1】：

编辑 - 添加 Codepen 示例：

click for Codepen example

要使用 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');

【讨论】：

当我运行第一个代码时，我不断得到 null 不是 elementToBeRemoved.parentNode... 部分的对象？我也一直在 setInterval() 中运行 append 和 remove，我认为这并不重要
查看这个 codepen 示例：codepen.io/dabalose7en/pen/ezZaQp 它有两个 removeImage 案例的示例
如果parentNode返回null不是对象，听起来好像图像div不存在？在代码笔中，我还根据您的原始帖子添加了<div id="image"></div>。
是的，当我查看您的 codepen 并将替代方法实施到我的程序中时，它运行良好，谢谢！

【解决方案2】：

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

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案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
    }
}

【讨论】：

【解决方案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;
  }
}

【讨论】：