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

Question

理想情况下，选中任何组的复选框时，将创建div来代表该组的动物，而当取消选中任何组时，将删除该组的div。我的问题是，每当我取消选中一个组时，它就会将所有div连同容器一起从所有组中删除，并且如果重新检查，则会阻止创建div的方法再次起作用。为什么会这样，我该如何解决？谢谢。

var cont = document.getElementById('cont');
    
function test(x) {
    var selected = x.checked;
    if (selected == true) {
        array.forEach(function(element) {
            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(header);
                cont.appendChild(div);
            }   
        })
    }   
    if (selected == false) {
        var zed = cont.getElementsByClassName(x.id);
        cont.remove(zed); 
    }
}
    

var array = [ 
    {title: 'Shark', sort: 'Sea'},
    {title: 'Whale', sort: 'Sea'},
    {title: 'Tuna', sort: 'Sea'},
    {title: 'Cow', sort: 'Farm'},
    {title: 'Sheep', sort: 'Farm'},
    {title: 'Chicken', sort: 'Farm'},
]

.results-container {
        display: flex;
        flex-direction: column;
        width: 200px;
        height: auto;
        min-height: 50px;
        margin-top: 10px;
        background-color:lightskyblue;
        padding: 10px;
    }
    
    
    .results-container div {
        display: flex;
        background-color: white; 
        height: 40px;
        width: 100%;
        border: 1px solid black;
        margin-bottom: 2px;
        justify-content: center;
        font-size: 10px;
    }

<div class='filter-container'>
    Sea: <input type="checkbox" id = 'Sea' onClick="test(this)" />
    Farm: <input type="checkbox" id="Farm" onClick="test(this)"/>
</div>
    
<div id='cont' class='results-container'></div>

Answer 1

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

• 您将多个元素的ID设置为相同的值。 id应该是唯一的。我将其更改为名称。
• 您的查询选择器尝试匹配ID，但缺少ID，请参见CSS Query Selector Specification。我使用了class属性来选择多个元素。
• 您调用remove方法，该方法将删除该元素。您需要遍历NodeList并删除与选择器匹配的每个子代。

这是固定代码：

var cont = document.getElementById('cont');
    
function test(x) {
    var selected = x.checked;
    if (selected == true) {
        array.forEach(function(element) {
            if (element.sort == x.name ) {
                var div = document.createElement('div');
                div.setAttribute("class", x.name)
                var header = document.createElement('h4');
                header.innerHTML = element.title;
                div.appendChild(header);
                cont.appendChild(div);
            }   
        })
    }   
    if (selected == false) {
        var zed = cont.querySelectorAll('.'+x.name);
        zed.forEach(el => cont.removeChild(el))
    }
}
    

var array = [ 
    {title: 'Shark', sort: 'Sea'},
    {title: 'Whale', sort: 'Sea'},
    {title: 'Tuna', sort: 'Sea'},
    {title: 'Cow', sort: 'Farm'},
    {title: 'Sheep', sort: 'Farm'},
    {title: 'Chicken', sort: 'Farm'},
]

.results-container {
        display: flex;
        flex-direction: column;
        width: 200px;
        height: auto;
        min-height: 50px;
        margin-top: 10px;
        background-color:lightskyblue;
        padding: 10px;
    }
    
    
    .results-container div {
        display: flex;
        background-color: white; 
        height: 40px;
        width: 100%;
        border: 1px solid black;
        margin-bottom: 2px;
        justify-content: center;
        font-size: 10px;
    }

<div class='filter-container'>
    Sea: <input type="checkbox" name = 'Sea' onClick="test(this)" />
    Farm: <input type="checkbox" name="Farm" onClick="test(this)"/>
</div>
    
<div id='cont' class='results-container'></div>

Answer 2

var cont = document.getElementById('cont');


var array = [ 
    {title: 'Shark', sort: 'Sea'},
    {title: 'Whale', sort: 'Sea'},
    {title: 'Tuna', sort: 'Sea'},
    {title: 'Cow', sort: 'Farm'},
    {title: 'Sheep', sort: 'Farm'},
    {title: 'Chicken', sort: 'Farm'},
]

$('.commonInput').on('click', function(){
  cont.innerHTML = "";
   $('.commonInput').each(function(){
     if($(this).prop("checked")==true){
       var id = $(this).attr('id');
       array.forEach(function(element) {
            if (element.sort == id) {
                var div = document.createElement('div');
                div.setAttribute('class', id);
                var header = document.createElement('h4');
                header.innerHTML = element.title;
                div.appendChild(header);
                cont.appendChild(div);
            }   
        });
     }else{
       var removeElm = $(this).attr('id');
       $('.'+removeElm).remove();
       console.log(removeElm);
       
     }     
   });
});

.results-container {
        display: flex;
        flex-direction: column;
        width: 200px;
        height: auto;
        min-height: 50px;
        margin-top: 10px;
        background-color:lightskyblue;
        padding: 10px;
    }
    
    
    .results-container div {
        display: flex;
        background-color: white; 
        height: 40px;
        width: 100%;
        border: 1px solid black;
        margin-bottom: 2px;
        justify-content: center;
        font-size: 10px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='filter-container'>
    Sea: <input type="checkbox" id = 'Sea' class="commonInput" />
    Farm: <input type="checkbox" id="Farm" class="commonInput"/>
</div>
    
<div id='cont' class='results-container'></div>

检查一些jQuery解决方案