Удаление определенного тега по нажатию на определённый чекбокс

Question

Есть группа чекбоксов по нажатию на которых должны появляться теги на странице(что впринципи работает). А при анчеке должны удалятся - чего не происходит. Использовал массив ячейками которых являются дивы со значениями чекбоксов но при их удалении все ячейки удаляются и также возвращяются в обратно. как мне поступить?

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>

Answer 1

У вас почти рабочий вариант, но вы вычищаете все элементы listArray при анчеке одного чекбокса. Вам просто нужно сделать removeChild одного элемента, соответствующего вашему чекбоксу, и потом удалить его из массива

Можно так:

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 {
      let elem = listArray.find(item => item.innerText === this.value);
      let index = listArray.indexOf(elem);
      content__block.removeChild(listArray[index]);
      listArray.splice(index, 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>

Answer 2

Предлагаю еще один подход рассмотреть.

Делаем два списка, один скрытый, второй видимый. Сразу создаем все теги и помещаем их в скрытый список. Тогда при изменении чекбокса, нам нужно сделать лишь одну операцию: добавить связанный элемент из скрытого списка в видимый (или наоборот). Добавить крестик к тегам тоже просто:

let group = document.querySelectorAll('.check-group input');

for (let e of group) {
  e.onchange = changeTag;

  let div  = document.createElement("div");
  let span = document.createElement("span");

  div.innerText = e.value;
  div.classList.add("ltag");
  span.innerText = 'x';
  span.onclick = function() {
    hidden.append(this.parentNode);
    e.checked = false;
  };
  div.append(span);

  e.target = div;
  e.checked ? checked.append(div) : hidden.append(div);
}

function changeTag() {
  this.checked ? checked.append(this.target) : hidden.append(this.target);
}

.ltag span {
  cursor: pointer;
  color: red;
  padding: 0 0.5em 0 0.2em;
}

#hidden { display: none; }
#taglist { margin-top: 1em; }
#checked div { display: inline-block; }
.check-group label { display: block; }

<div class="check-group">
  <label><input type="checkbox" value="Gazprom">Gazprom</label>
  <label><input type="checkbox" value="10w40">10w40</label>
  <label><input type="checkbox" value="10w30">10w30</label>
  <label><input type="checkbox" value="g-energy">g-energy</label>
  <label><input type="checkbox" value="Evooil">Evooil</label>
  <label><input type="checkbox" value="Platinum">Platinum</label>
  <label><input type="checkbox" value="O10W-40">O10W-40</label>
</div>

<div id="taglist">
  <div id="hidden"></div>
  <div id="checked"></div>
</div>

БЛОГ НА HUSL

Удаление определенного тега по нажатию на определённый чекбокс

Ответы (2 шт):