<ul>
  <li>hoge <button>delete</button></li>
  <li>foo <button>delete</button></li>
  <li>bar <button>delete</button></li>
</ul>
<button>add</button>

const wrapper = document.querySelector('ul');
const addBtn = document.querySelector('ul+button');
addBtn.addEventListener('click',()=>{
    wrapper.insertAdjacentHTML('beforeend', `<li>addContent<button>delete</button></li>`)
  });

// const lists = document.querySelectorAll('ul li');
// lists.forEach(list=>{
//   const deleteBtn = list.querySelector('button');
//   deleteBtn.addEventListener('click',()=>{
//     list.remove();
//   })
// });

wrapper.addEventListener('click',(e)=>{
  if(e.target.tagName === 'BUTTON'){
    e.target.closest('li').remove();
  }
})