Создание / удаление 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 должен быть уникальным. Я изменил его на имя.
• Ваш селектор запросов пытается соответствовать идентификатору, но пропускает # для него, см. Спецификация селектора запросов CSS . Я использовал свойство класса для выбора нескольких элементов.
• Вы вызываете метод 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