簡単なtodo list

前提・実現したいこと

簡単なto-do list を作っています。
ゴミ箱をクリックしたときに、要素を消したいのですが、
予定をinnerhtmlでappendしてるので、
作った要素がconst trash から漏れてしまいます。

どういった方法でtrashを再定義したらいいでしょうか。

該当のソースコード

ソースコード
javascript

const date = document.querySelector('[data-date]')
const what = document.querySelector('[data-what]')
const where = document.querySelector('[data-where]')
const submit = document.querySelector('[data-submit]')

const table = document.querySelector('.table')    
const trash = document.querySelectorAll('.trash')


submit.addEventListener('click', e => {
    e.preventDefault()

    let setDate = date.value
    let setWhat = what.value
    let setWhere = where.value

    let tr = document.createElement('tr')
    tr.innerHTML = `
    <th>${setDate}</th><th>${setWhat}</th><th>${setWhere}</th><td><div class="trash"></div></td>
    `
    table.appendChild(tr)

    date.value = ''
    what.value = ''
    where.value = ''

})



for(let i = 0; i< trash.length; i++) {

    trash[i].addEventListener('click', ()=> {        
        trash[i].parentElement.parentElement.remove()
    })
}

行動規範の内容に同意します

回答1件

ベストアンサー

イベントのバブリングを利用して、<div class="trach"> ではなく、document に click イベントハンドラを登録しましょう。

javascript
1document.addEventListener('click', event => {
2  if (event.target.classList.contains('trash'))
3    event.target.parentElement.parentElement.remove();
4});