Почему не удаляется на JS элемент через делегирование?

Question

[Корбин]

Ребята помогите плиз , через делегирование сделал добавление элементов, а вот удаление не могу сделать, ХЕЕЛП!

<div class="calc-body">
    <div class="calc-item">
     <!-- Тут Тело итема , система не пропустила  -->
    <button class="calc-del"></button>
    </div>    
    <button class="calc-button">Добавить</button>
  </div>

let calcBtn = document.querySelector('.calc-button'),
      calcBody = document.querySelector('.calc-body'),
      calcDel = document.querySelector('.calc-del'),
      calcItem = document.querySelectorAll('.calc-item');

function addItemCalc() {
    calcItem = document.createElement('div');
    calcItem.classList.add('calc-item');
    calcItem.innerHTML = `
     <!-- Тут Тело итема , система не пропустила  -->
    <button class="calc-del"></button>
    `;
    calcBody.before(calcItem);
}
calcBody.addEventListener('click', (event) => {
  const target = event.target;
  if (target && target.classList.contains('calc-button')) {
    addItemCalc();
  } 
});
calcBody.addEventListener('click', (event) => {
  const target = event.target;
  if (target && target.classList.contains('calc-del')) {
      calcItem.forEach((item,i) => {
        if (i == target) {
          item[i] = item.remove();
        }
      });
  }
});

https://codesandbox.io/s/element-plus-demo-forked-2q64i

Comments

[Mikhail Osher]

codesandbox demo pls

[Корбин]

Эмм в смысле там проблему покажет?!

[Корбин]

Mikhail Osher, https://codesandbox.io/s/element-plus-demo-forked-2q64i

Answer 1

[Alexandroppolus]

if (i == target)

Здесь target - та самая кнопка-удалялка, а не итем

Comments

[Корбин]

calcDel.addEventListener('click', (event) => {
  const target = event.target;
  if (target && target.classList.contains('calc-del')) {
      calcItem.forEach((item,i) => {
        if (i == target) {
          item[i] = item.remove();
        }
      });
  }
});

кнопку CalcDel удалялку
в смысле так сделать что ли?

[Alexandroppolus]

Корбин, target - кнопка "calc-del", по которой кликлули. Далее ты запускаешь цикл по элементам "calc-item" (среди которых есть родительский элемент для кнопки) и в цикле зачем-то сравниваешь кнопку с числом в переменной i. Конечно же, это условие не выполняется, и потому не происходит странное и непонятное действие item[i] = item.remove().