Question

innerHTML

我正在使用var typebox = document.getElementById("typebox"); typebox.style.display = 'none';添加多个图片，我需要点击删除按钮删除这些图片，但我无法弄清楚如何执行此操作。

我试过了：

display:none;

使用var typebox = document.getElementById("typebox"); typebox.innerHTML = "";会使这些图片完全不显示。

{{1}}

似乎它不会删除这些图像，更像是什么都不做。

那么我应该如何完全删除这些图像？

Answer 1

试试这个：

在这种情况下，
removeChild会有所帮助

var typebox = document.getElementById('typebox');
typebox.innerHTML += "<div class='typebox'><img id='typeImg' width='300px' height='300px' src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'></div>";
document.getElementById('removeBtn').addEventListener('click', function () {
    var toRemove = document.getElementById('typeImg');
    toRemove.parentNode.removeChild(toRemove);
});

<div id='typebox'></div>
<button id='removeBtn'>remove</button>

我希望这有帮助..

Answer 2

您的代码存在一些问题：

1）document.getElementById（），因为它读取，得到... id的元素，而不是类

所以给你的代码

typebox.innerHTML += "<div class='typebox'><img id='typeImg' width='30px' height='30px' src='"+d[o].src+"'></div>";

你应该使用document.getElementByClassName('typebox')，它将返回一个类似于数组的对象（HTMLCollection或NodeList），页面hwich的所有元素都有类'typebox'

2）id属性

中只应有一个具有特定值的元素

因此，如果您多次使用此代码，则无法获取图像：

typebox.innerHTML += "<div class='typebox'><img id='typeImg' width='30px' height='30px' src="+d[o].src+"></div>";

因为会有多个<img>标记具有相同的id

如果要删除所有图像及其包装器：

var elements = Array.prototype.slice.call(document.getElementsByClassName('typebox'));
elements.forEach(function (element) {
    element.parentNode.parentNode.removeChild(element.parentNode);
);

Answer 3

您遗失'，innetHTML也应该innerHTML ...将您的代码更改为：

typebox.innerHTML += "<div class='typebox'><img id='typeImg' width='30px' height='30px' src='"+d[o].src+"'></div>";

var typebox = document.getElementById("typebox");
typebox.innerHTML = "";

Answer 4

只需使用html（）方法即可完全删除图片。（如果是jquery）

您的代码也可以，但是后续行有问题

typebox.innetHTML = "";

只需用

替换上面的行

typebox.innerHTML = "";

Answer 5

您可以使用JavaScript的removeChild()方法执行此操作。请参阅以下代码：

function deleteDiv(){
var myDiv = document.getElementsByClassName("typebox")[0];
document.removeChild(myDiv);
}

<强>解释

第一行获取一个带有class'typebox'的元素，并将其分配给名为myDiv的变量。

第二行从正文中移除div。

请参阅this link以获取removeChild()的参考。

完全删除innerHTML img元素

5 个答案: