如何在使用addEventListener（Javascript）选择页面上的任何图像时删除div？

我的作业要求我生成一张有文字的图片。它还要求我在单击时将其删除。我已经得到它来生成图片和文字的工作，但我不能删除div包装时，点击子图像

我知道我可以创建addEventListener，在单击div时删除该div，但是我的div当前会扩展到整行。我能够使div的大小与图像的大小相同，但是我无法使meme库看起来像样。随着对css定位、网格、flexbox等的更好理解，我确信我可以让它工作，但现在，我需要继续我的课程！为什么我的代码不允许我在点击图像时删除meme？此外，如果有人知道如何正确的中心“点击删除”悬停文本，我将非常感谢

const form=document.querySelector（'#addmeme'）；
const imageUrl=document.querySelector（“#imageurlinput”）；
const topTextInput=document.querySelector（“#tptextinput”）；
const bottomTextInput=document.querySelector（“#btmtextput”）；
const submitBtn=document.querySelector（'submitbutton'）；
const images=document.getElementsByTagName（'img'）；
表.addEventListener（'submit'，函数（e）{
//防止网站更改
e、 预防默认值（）；
//创建新的meme div并作为子项附加到新的meme库
const newMeme=document.createElement（'div'）；
const memeLibrary=document.querySelector（“#memeLibrary”）；
newMeme.classList.add（“meme”）；
memeLibrary.appendChild（newMeme）；
//创建img元素。将类和图像的URL添加到img
const memeImage=document.createElement（'img'）；
memeImage.classList.add（“memepic”）；
memeImage.src=imageUrl.value；
newMeme.appendChild（memeImage）；
//为meme的toptext创建div，并添加用户输入的class和innterHTML
const topText=document.createElement（'div'）；
topText.classList.add（“topText”）；
topText.innerHTML=topTextInput.value；
newMeme.appendChild（topText）；
//当用户将鼠标悬停在图像上时，为文本创建div
const hoverText=document.createElement（'div'）；
hoverText.classList.add（“hoverText”）；
hoverText.innerHTML=“单击以删除”；
newMeme.appendChild（悬停文本）；
//为meme的底部文本创建div，并添加用户输入的class和innterHTML
const bottomText=document.createElement（'div'）；
bottomText.classList.add（“bottomText”）；
bottomText.innerHTML=bottomTextInput.value；
newMeme.appendChild（底部文本）；
//清除输入字段
imageUrl.value=''；
topTextInput.value=''；
bottomTextInput.value=''；
})
//单击时删除meme
images.addEventListener（“单击”，函数（e）{
e、 target.parentElement.remove（）；
})

@导入url（'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@导入url（'https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'）；
身体{
背景色：#E1EFE6；
边际：0px；
}
#头衔{
文本对齐：居中；
颜色：#000411；
字体系列：“罂粟花”、“机器人”；
字号：3em；
保证金：20px 0px 0px 0px；
}
#指示{
文本对齐：居中；
颜色：#000411；
字体系列：“Roboto”；
字号：1em；
}
.userinputsection{
保证金：20px自动；
宽度：500px；
}
.userinputsection输入{
显示：内联块；
文本对齐：左对齐；
浮动：对；
宽度：360px；
}
.userinputsection标签{
显示：内联块；
文本对齐：右对齐；
字体系列：“Roboto”；
字号：1em；
}
#提交按钮IV{
利润率：10px自动；
显示：内联块；
}
#提交按钮{
字体系列：“Roboto”；
}
#记忆库{
显示器：flexbox；
填充物：5px；
背景色：白色；
身高：100%；
宽度：100%；
}
.模因{
位置：相对位置；
最大宽度：400px；
利润率：10px自动；
}
memepic先生{
最大宽度：400px；
边界半径：10px；
边框宽度：1px 0px 0px 1px；
边框颜色：浅灰色；
边框样式：实心；
盒影：5px 5px 2px浅灰色；
不透明度：1；
}
.memepic:悬停{
不透明度：0.5；
过渡：放松；
}
.toptext{
位置：绝对位置；
颜色：白色；
-webkit文本笔划：2px黑色；
字号：2em；
字体系列：影响；
宽度：100%；
文本对齐：居中；
顶部：0px；
边缘顶部：10px；
}
.memepic:hover~.toptext{
-webkit文本笔划：2px灰色；
过渡：.5s轻松
}
.bottomtext{
位置：绝对位置；
颜色：白色；
-webkit文本笔划：2px黑色；
字号：2em；
字体系列：影响；
宽度：100%；
文本对齐：居中；
底部：0px；
边缘底部：10px；
}
.memepic:hover~.bottomtext{
-webkit文本笔划：2px灰色；
过渡：.5s轻松
}
.悬停文字{
可见性：隐藏；
不透明度：0；
位置：绝对位置；
颜色：黑色；
字号：2em；
字体系列：Poppins；
宽度：100%；
文本对齐：居中；
垂直对齐：中间对齐；
最高：50%；
保证金：0；
填充：0；
}
.memepic:hover~.hoverText{
能见度：可见；
不透明度：1；
过渡：放松；
}

搞笑图片制作
搞笑图片制作
填写下表，创建模因！
图像URL


上面的文字


底部文本




这是最上面的文本
单击以删除
这是最下面的文本
这是最上面的文本
单击以删除
这是最下面的文本

您不能将侦听器添加到：

//getElementsByTagName返回节点列表
const images=document.getElementsByTagName（'img'）；
//爆炸
images.addEventListener（“单击”，函数（e）{
e、 target.parentElement.remove（）；
})

但是，您可以删除这些项并向其中添加一个侦听器