Как удалить один, динамически встраиваемый, элемент из списка

Question

Есть список дел, туда добавляются из инпута значения, вписанные пользователем. Мусорка справа от каждой li добавляется динамически. Нужно сделать так, чтобы при нажатии на мусорку удалялась строчка. Попробовал пару способов, которые я знаю, но не судьба.

let newItem = null,
    trashIcon,
    id = 1,
    todoDB = {};

// создание <li> и мусорки
function createElements(value) {                       
  newItem = document.createElement('li');
  newItem.classList.add('list-li');
  newItem.textContent = `${value}`;
  trashIcon = document.createElement('div');
  trashIcon.classList.add('delete');
  return newItem;
}
//Добавляю в DOM
function addToList(value) {
  createElements(value);
  list.prepend(newItem);
  newItem.append(trashIcon);
  addToDB(value);
  console.log(todoDB);
}
// Получаю мусорку и навешиваю обработчик
function deleteOneLi() {
  const deleteBtn = document.querySelector('.delete');
  deleteBtn.addEventListener('click', () => {
    console.log('hi');
  });
}
deleteOneLi();

Answer 1

Используйте делегирование событий, чтобы каждый раз не заботиться про обработку клика при добавлении новых кнопок.

let mama = document.getElementById("родительский-блок-куда-добавляете-элементы");

mama.addEventListener("click", function(e) {
  if (!e.target.classList.contains("delete")) return;
  // Если у кликнутого элемента нет класса "delete" — прервать функцию.

  e.target.parentNode.remove();
});

БЛОГ НА HUSL

Как удалить один, динамически встраиваемый, элемент из списка

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