在用户更改Javascript中的选项后删除或隐藏elments

我网站上的一个功能是，用户可以根据

标题

和

号角数

对图像进行排序

我已经创建了逻辑，它工作得非常完美，但问题在于DOM上的渲染

如果我用

title

或

horns

单击排序，所有图像都将被渲染

不知道我犯了什么错误

下面是我的说明代码：

请注意，我添加了本地JSON文件来代替CSS，以防万一，如果你们中的任何人需要的话

让arrayOfObjects=[]；
功能图像（描述、喇叭、图像url、关键字、标题）{
this.description=描述；
这个。喇叭=喇叭；
this.image\u url=image\u url；
this.keyword=关键字；
this.title=标题；
arrayOfObjects.push（这个）；
}
获取（“../data/page-1.json”）
.then（（results）=>results.json（））
。然后（（数据）=>{
data.forEach（（val）=>{
新形象(
val.description，
瓦尔·霍恩斯，
val.image\u url，
val.keyword，
val.title
);
});
render（）
sortByTitle（）
sortByHorn（）
过滤器（）
});
功能排序（a、b）{
如果（a.标题b.标题）{
返回1；
}
返回0；
}
函数sorttedByHorn（a，b）{
如果（a.喇叭>b.喇叭）{
返回-1；
}
如果（a.喇叭{
让imgEl=document.createElement（“img”）；
normalRender.appendChild（imgEl）；
imgEl.src=val.image\u url；
});
}
函数sortbytle（）{
让sortEl=document.getElementById（'sort'））
让optionEl=document.createElement（'option'））
分拣机附件（选装件）
optionEl.textContent='Title'
让copy=arrayOfObjects.slice（）
让sortedCopy=copy.sort（排序）
sortEl.addEventListener（'change'，（）=>{
document.getElementById（“normalRender”）.style.display=“无”；
document.getElementById（“horn”）.style.display=“无”；
让divSorted=document.getElementById（“标题”）
divSorted.innerHTML=“”；
sortedCopy.forEach（（val）=>{
让sortedImage=document.createElement（'img'））
divSorted.appendChild（sortedImage）
sortedImage.src=`${val.image\u url}`
})
})
}
函数sortByHorn（）{
让sortEl=document.getElementById（'sort'））
让optionEl=document.createElement（'option'））
分拣机附件（选装件）
optionEl.textContent='Horn'
让copy2=arrayOfObjects.slice（）
让sortedCopy=copy2.sort（sorttedByHorn）
console.log（sortedCopy）
sortEl.addEventListener（'change'，（）=>{
document.getElementById（“normalRender”）.style.display=“无”；
document.getElementById（“title”）.style.display=“无”；
//document.getElementById（“过滤器”）.style.display=“无”；
让divSorted2=document.getElementById（“horn”）
divSorted2.innerHTML=“”；
sortedCopy.forEach（（val）=>{
让sortedImage=document.createElement（'img'））
divSorted2.appendChild（sortedImage）
sortedImage.src=`${val.image\u url}`
})
})
}
函数过滤器（）{
让关键字数组=[]；
让selection=document.getElementById（“selection”）；
arrayOfObjects.forEach（（val，idx）=>{
关键字数组.push（val.keyword）；
});
let unique=[…新集合（关键字数组）]；
唯一。forEach（（val2）=>{
让optionEl=document.createElement（“选项”）；
选择。附加子项（optionEl）；
optionEl.textContent=`${val2}`；
setAttribute（“value”，`${val2}`）；
});
selection.addEventListener（“更改”，（）=>{
//document.getElementById（“normalRender”）.style.display=“无”；
//document.getElementById（“title”）.style.display=“无”；
//document.getElementById（“horn”）.style.display=“无”；
让div=document.getElementById（“过滤器”）；
div.innerHTML=“”；
arrayOfObjects.forEach（（val）=>{
if（selection.options[selection.selectedIndex].text==val.keyword）{
让imgEl=document.createElement（“img”）；
儿童分部（imgEl）；
imgEl.src=val.image\u url；
}
});
});
}

//这是本地JSON文件
[
{
“图像url”：http://3.bp.blogspot.com/_DBYF1AdFaHw/TE-f0cDQ24I/AAAAAAAACZg/l-FdTZ6M7z8/s1600/Unicorn_and_Narwhal_by_dinglehopper.jpg",
“标题”：“UniWhal”，
“描述”：“独角兽和独角鲸用鼻子蹭着它们的角”，
“关键词”：“独角鲸”，
“号角”：1
},
{
“图像url”：https://images.unsplash.com/photo-1512636618879-bbe79107e9e3?ixlib=rb-0.3.5&ixid=eyjhcbfawqiojeymdd9&s=bd9460ee6d1ddbb6b1ca7be86dfc4590&auto=format&fit=crop&w=1825&q=80“，
“头衔”：“犀牛家族”，
“描述”：“母亲（或父亲）有两个孩子的犀牛”，
“关键字”：“犀牛”，
“号角”：2
},
{
“图像url”：https://www.dhresource.com/0x0s/f2-albu-g5-M00-1A-11-rBVaI1hsIIiALxKzAAIHjSU3VkE490.jpg/wholesale-halloween-costume-prop-unicorn.jpg",
“头衔”：“独角兽头”，
“描述”：“戴着令人毛骨悚然的独角兽头面具的人”，
“关键字”：“独角兽”，
“号角”：1
},
{
“图像url”：https://images.unsplash.com/photo-1518946222227-364f22132616?ixlib=rb-0.3.5&ixid=eyjhcbfawqiojeymdd9&s=4836a6fca62e7dce9324346bacfde085&auto=format&fit=crop&w=2534&q=80“，
“标题”：“UniLego”，
“描述”：“穿着独角兽服装的乐高雕像”，
“关键字”：“unilego”，
“号角”：1
},
{
“图像url”：https://i.pinimg.com/736x/b4/61/06/b46106830b841017ea59870b27ec18dc--narwhals-a-unicorn.jpg",
“头衔”：“基本上是独角兽”，
“描述”：“独角鲸基本上是独角兽，对吧？”，
“关键词”：“独角鲸”，
“号角