javascript - 如何在 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 示例:

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