Есть группа чекбоксов по нажатию на которых должны появляться теги на странице(что впринципи работает). А при анчеке должны удалятся - чего не происходит. Использовал массив ячейками которых являются дивы со значениями чекбоксов но при их удалении все ячейки удаляются и также возвращяются в обратно. как мне поступить?
let content__block = document.querySelector(".contentTeg");
let checkboxes = document.querySelectorAll(".tag");
let listArray = [];
for (let checkbox of checkboxes) {
checkbox.addEventListener("click", function() {
if (this.checked) {
let div = document.createElement("div");
div.innerHTML = this.value;
div.classList.add("content__blockText");
listArray.push(div);
for (i = 0; i < listArray.length; i++) {
content__block.append(listArray[i]);
}
} else {
listArray = listArray.filter((e) => e !== this.value);
for (i = 0; i < listArray.length; i++) {
content__block.removeChild(listArray[i]);
// listArray.splice(i, 1)
}
}
});
}
.CFI3 {
display: flex;
flex-direction: column;
}
.CFI3mode {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 29px 6px 12px;
background: #F7F7FA;
border-radius: 4px;
cursor: pointer;
box-shadow: 0px 1px 2px rgba(58, 58, 68, 0.24), 0px 2px 4px rgba(90, 91, 106, 0.24);
border-radius: 4px;
border-bottom: 2px solid rgba(58, 58, 68, 0.24);
background: #fff;
}
.classification___Box {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
margin-bottom: 20px;
}
.content__block {
display: flex;
margin-top: 30px;
}
.contentTeg {
display: flex;
column-gap: 10px;
}
<div class="CFI3">
<div class="CFI3mode">
<div class="classification_Itemtext">Теги</div>
<img src="./assets/img/arrow.svg" alt="">
</div>
<div class="classification___Box3">
<div class="classification___Boxtext"><input type="checkbox" class="tag" id="tag1" value="Gazprom"><label for="tag1">Gazprom</label>
</div>
<div class="classification___Boxtext"><input type="checkbox" class="tag" id="tag2" value="10w40"><label for="tag2">10w40</label>
</div>
<div class="classification___Boxtext"><input type="checkbox" class="tag" id="tag3" value="10w30"><label for="tag3">10w30</label>
</div>
<div class="classification___Boxtext"><input type="checkbox" class="tag" id="tag4" value="g-energy"><label for="tag4">g-energy</label>
</div>
<div class="classification___Boxtext"><input type="checkbox" class="tag" id="tag5" value="Evooil"><label for="tag5">Evooil</label>
</div>
<div class="classification___Boxtext"><input type="checkbox" class="tag" id="tag6" value="Platinum"><label for="tag6">Platinum</label>
</div>
<div class="classification___Boxtext"><input type="checkbox" class="tag" id="tag7" value="O10W-40"><label for="tag7">O10W-40</label>
</div>
</div>
</div>
<div class="content__block">
<span>Теги: </span>
<div class="contentTeg">
<!-- <div class="content__blockText">Gazprom<span>×</span></div> -->
</div>
</div>