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

我试图做一个函数（在JavaScript中），它删除了我在html中附加到div的图像，我无法获取想要的图像去除。总体思路是能够动态地附加和删除不必使用多个div的图像。这里是功能增加图像如何在div中添加和删除图像（javascript和html）

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

我无法访问IMG在removeImage，因为它不在范围之内。那么是否有一种方法可以将img传递给removeImage，而无需使用全局或另一种完全不同的方式来使用append或remove？

我不知道，如果你需要它，但所有我在我的HTML文件

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

来源

2016-06-14 Wongesse

可以哟你分享可执行的演示/片段或[JSFiddle]（https://jsfiddle.net/）？ – Rayon

如何调用removeImage？ – Rayon

编辑 - 添加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');

来源

2016-06-14 18:27:39 DabaloSe7eN

当我运行第一个代码时，我一直得到这个null不是elementToBeRemoved.parentNode ...部分的对象？此外，我一直运行追加和删除在setInterval（），我不认为这个问题认为 – Wongesse

看看这codepen的例子： http://codepen.io/dabalose7en/pen/ezZaQp 它有两个例子removeImage例子 – DabaloSe7eN

如果parentNode返回null不是一个对象，它听起来好像图像div不存在？在codepen中，我还为您的原始文章添加了'

'。 – DabaloSe7eN

你定义在你的removeImage函数变量img？它看起来不像你。在removeImage确保您发现IMG不知何故，并将其存储在一个变量的位置，然后就可以用它来删除它

来源

2016-06-14 18:19:22 blubberbo

你可以尝试在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); 
}

来源

2016-06-14 18:29:56

您需要遍历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 
    } 
}

来源

2016-06-14 18:30:18

要建立在什么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; 
    } 
}

来源

2016-06-14 18:43:57

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

回答

相关问题