Javascript 是否使用vanilla JS从页面中删除渲染图像？

我目前正在设计一个模式，用户可以从他们的系统一次上传多个图像，并在弹出模式中显示它们。其中一项要求是添加一项功能，用户可以点击按钮删除上传的所有渲染图像。。我的重置按钮目前只是清除信息，但不会删除图像。有人有什么想法吗？我的HTML、CSS和JS如下：

在将来，我将需要改变这一点，以允许用户调用一个API，该API从AWS S3服务器获取图像，然后渲染回屏幕。。。不确定香草JS是否是最好的？我们仅限于使用HTML、CSS和JS

函数预览文件（）{
var preview=document.querySelector（“#preview”）；
var files=document.querySelector（'input[type=file]'）。files；
函数readAndPreview（文件）{
//确保'file.name'符合我们的扩展标准
if（/\（jpe？g | png | gif）$/i.test（file.name））{
var reader=new FileReader（）；
reader.addEventListener（“加载”，函数（）{
var image=新图像（）；
//JS中的样式//
image.height=160；
image.width=160；
image.style.flexDirection=“行”；
image.title=file.name；
image.src=this.result；
预览。追加子对象（图像）；
}，假）；
reader.readAsDataURL（文件）；
}
}
如果（文件）{
[].forEach.call（文件、读取和预览）；
}
}

/*浮动按钮：*/
.浮动btn{
宽度：80px；
高度：80px；
背景：#0B406D；
显示器：flex；
边界半径：50%；
颜色：白色；
字体大小：40px；
对齐项目：居中；
证明内容：中心；
文字装饰：无；
盒影：2px2p5pRGBA（0,0,0,0.25）；
位置：固定；
右：120px；
底部：20px；
轮廓：蓝色；
边界：无；
光标：指针；
}
.浮动btn：悬停{
背景：4D89C8；
}
.浮动-btn2{
宽度：80px；
高度：80px；
背景：#0B406D；
显示器：flex；
边界半径：50%；
颜色：白色；
字体大小：40px；
对齐项目：居中；
证明内容：中心；
文字装饰：无；
盒影：2px2p5pRGBA（0,0,0,0.25）；
位置：固定；
右：20px；
底部：20px；
轮廓：蓝色；
边界：无；
光标：指针；
}
.浮动-btn2：悬停{
背景：4D89C8；
}
/*模态样式：*/
.莫代尔{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.7）；
位置：固定；
排名：0；
z指数：1；
显示

&时代；
图像搜索和处理：
选择多个文件：
+
x

上传或预览

图像后，您只需执行
清除/重置
表单的功能，然后单击
hideImage（）
或按
X
按钮清除图像的
预览

现场演示：


函数预览文件（）{
var preview=document.querySelector（“#preview”）；
var files=document.querySelector（'input[type=file]'）。files；
函数readAndPreview（文件）{
//确保'file.name'符合我们的扩展标准
if（/\（jpe？g | png | gif）$/i.test（file.name））{
var reader=new FileReader（）；
reader.addEventListener（“加载”，函数（）{
var image=新图像（）；
//JS中的样式//
image.height=160；
image.width=160；
image.style.flexDirection=“行”；
image.title=file.name；
image.src=this.result；
预览。追加子对象（图像）；
}，假）；
reader.readAsDataURL（文件）；
}
}
如果（文件）{
[].forEach.call（文件、读取和预览）；
}
}
函数hideImage（）{
document.getElementById（“模态表单”）.reset（）；//reset表单
var preview=document.querySelector（“预览”）；
preview.innerHTML=''//将preview设置为null
}
。浮动btn{
宽度：80px；
高度：80px；
背景：#0B406D；
显示器：flex；
边界半径：50%；
颜色：白色；
字体大小：40px；
对齐项目：居中；
证明内容：中心；
文字装饰：无；
盒影：2px2p5pRGBA（0,0,0,0.25）；
位置：固定；
右：120px；
底部：20px；
轮廓：蓝色；
边界：无；
光标：指针；
}
.浮动btn：悬停{
背景：4D89C8；
}
.浮动-btn2{
宽度：80px；
高度：80px；
背景：#0B406D；
显示器：flex；
边界半径：50%；
颜色：白色；
字体大小：40px；
对齐项目：居中；
证明内容：中心；
文字装饰：无；
盒影：2px2p5pRGBA（0,0,0,0.25）；
位置：固定；
右：20px；
底部：20px；
轮廓：蓝色；
边界：无；
光标：指针；
}
.浮动-btn2：悬停{
背景：4D89C8；
}
/*模态样式：*/
.莫代尔{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.7）；
位置：固定；
排名：0；
z指数：1；
显示：无；
证明内容：中心；
对齐项目：居中；
}
.模态内容{
宽度：80%；
身高：80%；
背景色：rgba（255、255、255、0.9）；
边界半径：4px；
填充：20px；
利润率：20%自动；
盒影：0 5px 8px 0 rgba（0,0,0,0.2），0 7px 20px rgba（0,0,0,0.17）；
动画名称：modalopen；
动画持续时间：1s；
弯曲方向：立柱；
证明内容：周围的空间；
}
.模态标题{
字号：12号；
颜色：黑色；
}
.模态头h2{
保证金：0；
}
.模态体{
宽度：33.33%；
填充物：5px；
}
.关闭{
颜色：#ccc；
浮动：对；
字体大小：50px；
}
.closeBtn:悬停，
.closeBtn:焦点{
颜色：红色；
文字装饰：无；
光标：指针；
}
@关键帧modalopen{
从{
不透明度：0
}
到{
不透明度：1
}
}
/*图像显示样式：*/
形式{
边缘顶部：10px；
填充物：5px；
边界半径：4px；
保证金：0自动；
}
img{
浮动：左；
宽度：150px；
高度：150像素；
右侧填充：15px；
框大小：边框框；
}
img：悬停