Как найти кнопку у созданного элемента

Question

Хочу написать список задач с сохранением в localStorage, но не знаю как обратиться к кнопке удаления. Подскажите пожалуйста как это реализовать.

const input = document.querySelector('.input')
const btn = document.querySelector('.btn')
const list = document.querySelector('.list')

function saveItem() {
  localStorage.setItem('item', list.innerHTML)
}

btn.addEventListener('click', () => {
  const item = document.createElement('div')
  item.classList.add('item')
  item.innerHTML = 
    `
    <div class="name">${input.value}</div>
      <button class="remove">
      <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path></svg>
            </button>
    `

  list.appendChild(item)
  saveItem()
})

if (localStorage.getItem('item')) {
    list.innerHTML = localStorage.getItem('item')
}

.item {
  display: flex;
  margin-bottom: 15px;
} 

.wrapper {
  margin-bottom: 20px;
}

button {
  background: none;
  border:none;
  cursor: pointer;
}

svg {
  width: 20px;
  height: 20px;
}

path {
  stroke: #000000;
}

  <div class="wrapper">
    <input class="input" type="text">
    <button class="btn">Добавить задачу</button>
  </div>
  
  <div class="list">
    <div class="item">
      <div class="name">Задача 1</div>
      <button class="remove">
      <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path></svg>
            </button>
    </div>
  </div>

Answer 1

function onClick()
{
  console.log("*Удалили*")
}

const item = document.createElement("div");
item.innerHTML = ` <button class="remove">Удалить</button>`

document.querySelector("body").appendChild(item);
item.querySelector("button").onclick = onClick;

БЛОГ НА HUSL

Как найти кнопку у созданного элемента

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