无法在"节点"上执行'removeChild'：参数 1 不是"节点"类型。在生成时

Question

我正在学习使用DOM一次生成和删除一个图像，但我无法理解这个错误。在我添加if语句之前，它运行良好。我看过关于堆栈溢出的类似帖子，但仍然无法理解。我的代码如下：

HTML

<div id="imageContainer">
<!-- <img src="/image/bananas.jpg"> -->
</div>

Javascript

let images = [
{
image_name: 'bananas.jpg',
number_of_items: 6,
},
{
image_name: 'birthday candles.jpg',
number_of_items: 7,
},
{
image_name: 'blocks.jpg',
number_of_items: 6,
},
{
image_name: 'brushes.jpg',
number_of_items: 7,
}]
let generate = () => {
let randomNum = Math.floor(Math.random() * images.length);
let imageGenerated = images[randomNum].image_name;
let imageContainer = document.getElementById("imageContainer");
if (imageContainer.hasChildNodes()) {
imageContainer.removeChild(imageContainer.firstElementChild);
}
let img = document.createElement("img");
img.src = "image/" + imageGenerated;
imageContainer.appendChild(img);   
};
let timer = () => {
setInterval(generate, 3000);
};

Answer 1

您的问题是hasChildNodes检查任何类型的节点，而注释是一个节点。

要使用element.children检查子元素，它将返回所有子元素的类似数组的对象。

if (imageContainer.children.length) {
imageContainer.removeChild(imageContainer.children[0];
}