Javascript 使用复选框过滤器创建/删除div

理想情况下，当选中任一组的复选框时，将创建代表该组动物的div，当取消选中任一组时，将删除该组的div。我的问题是，无论何时取消选中一个组，它都会从所有组以及容器中删除div，并且如果重新检查，将阻止创建div的方法再次工作。这是为什么？我该如何修复它？谢谢

var cont=document.getElementById（'cont'）；
功能测试（x）{
选择的var=x.选中；
如果（所选==true）{
array.forEach（函数（元素）{
if（element.sort==x.id）{
var div=document.createElement（'div'）；
div.className=x.id；
var header=document.createElement（'h4'）；
header.innerHTML=element.title；
div.appendChild（标题）；
续儿童组（分区）；
}   
})
}   
如果（所选==false）{
var zed=cont.getElementsByClassName（x.id）；
继续移除（zed）；
}
}
变量数组=[
{标题：'鲨鱼'，排序：'海'}，
{标题：'鲸'，排序：'海'}，
{标题：'金枪鱼'，排序：'海'}，
{标题：'Cow'，排序：'Farm'}，
{标题：'绵羊'，排序：'农场'}，
{标题：'鸡'，排序：'农场'}，
]

.results容器{
显示器：flex；
弯曲方向：立柱；
宽度：200px；
高度：自动；
最小高度：50px；
边缘顶部：10px；
背景色：淡天蓝；
填充：10px；
}
.结果货柜组{
显示器：flex；
背景色：白色；
高度：40px；
宽度：100%；
边框：1px纯黑；
边缘底部：2px；
证明内容：中心；
字体大小：10px；
}

海：
农场：

我修复了您的代码并发现了一些问题：

• 将多个元素的id设置为相同的值。

  id

  应该是唯一的。我把它改成了名字
• 您的查询选择器尝试匹配id，但未找到#对于它，请参见。我使用一个类属性来选择多个元素
• 调用remove方法，该方法将删除该元素。您需要循环遍历节点列表并删除与选择器匹配的每个子节点

下面是一个固定代码：

var cont=document.getElementById（'cont'）；
功能测试（x）{
选择的var=x.选中；
如果（所选==true）{
array.forEach（函数（元素）{
if（element.sort==x.name）{
var div=document.createElement（'div'）；
div.setAttribute（“类”，x.name）
var header=document.createElement（'h4'）；
header.innerHTML=element.title；
div.appendChild（标题）；
续儿童组（分区）；
}   
})
}   
如果（所选==false）{
var zed=cont.querySelectorAll（'.'+x.name）；
zed.forEach（el=>cont.removeChild（el））
}
}
变量数组=[
{标题：'鲨鱼'，排序：'海'}，
{标题：'鲸'，排序：'海'}，
{标题：'金枪鱼'，排序：'海'}，
{标题：'Cow'，排序：'Farm'}，
{标题：'绵羊'，排序：'农场'}，
{标题：'鸡'，排序：'农场'}，
]

.results容器{
显示器：flex；
弯曲方向：立柱；
宽度：200px；
高度：自动；
最小高度：50px；
边缘顶部：10px；
背景色：淡天蓝；
填充：10px；
}
.结果货柜组{
显示器：flex；
背景色：白色；
高度：40px；
宽度：100%；
边框：1px纯黑；
边缘底部：2px；
证明内容：中心；
字体大小：10px；
}

海：
农场：

var cont=document.getElementById（'cont'）；
变量数组=[
{标题：'鲨鱼'，排序：'海'}，
{标题：'鲸'，排序：'海'}，
{标题：'金枪鱼'，排序：'海'}，
{标题：'Cow'，排序：'Farm'}，
{标题：'绵羊'，排序：'农场'}，
{标题：'鸡'，排序：'农场'}，
]
$（'.commonInput'）。在（'click'，function（）上{
cont.innerHTML=“”；
$（'.commonInput'）。每个（函数（）{
if（$（this）.prop（“选中”）==true）{
var id=$（this.attr（'id'）；
array.forEach（函数（元素）{
if（element.sort==id）{
var div=document.createElement（'div'）；
div.setAttribute（'class'，id）；
var header=document.createElement（'h4'）；
header.innerHTML=element.title；
div.appendChild（标题）；
续儿童组（分区）；
}   
});
}否则{
var removeElm=$（this.attr（'id'）；
$（'.+removeElm.remove（）；
console.log（removeElm）；
}     
});
});
.results容器{
显示器：flex；
弯曲方向：立柱；
宽度：200px；
高度：自动；
最小高度：50px；
边缘顶部：10px；
背景色：淡天蓝；
填充：10px；
}
.结果货柜组{
显示器：flex；
背景色：白色；
高度：40px；
宽度：100%；
边框：1px纯黑；
边缘底部：2px；
证明内容：中心；
字体大小：10px；
}

海：
农场：
完美。谢谢你的解释和解答。谢谢你，松饼。