將 eventListener 附加到單擊另一個按鈕時將出現的按鈕？

Question

所以基本上，我正在處理一個待辦事項列表，您必須使用“輸入”按鈕輸入一個任務，然后該任務會出現在 UI 中，並帶有一個名為“刪除”的按鈕。

我無法將事件偵聽器附加到刪除按鈕。

HTML：

<div id="container">

    <input type="checkbox" id="checkbox" name="task1"  >
    <label for="task1" id="tasks">running 10 mile</label><br>
    <button class="delete">Delete</button>
    
</div>

這是默認的。

'''javascript

    tasks = []

    btnEnter.addEventListener('click',function(e){
    e.preventDefault();
    
    if (labelInput.value !== ''){
        tasks.push(labelInput.value)//if not '' push to the tasks arr

    // to display the last element of the tasks array:
    tasks.slice(-1).map((task , i)=>{
    
    const html =
    `<div id="container">
    <input type="checkbox" id="checkbox" name="task${i}"  >
    <label for="task${i}" id="tasks">${task}</label><br>
    <button class="delete">Delete</button>
    </div>`;
    inputDiv.insertAdjacentHTML('afterend',html)

    // to clear the input text;
    labelInput.value ='';   
})

    }else {alert('enter a valid task')};
    
})

Answer 1

在每個刪除按鈕上附加事件偵聽器的問題是，當頁面首次加載時，它們在 DOM 中不存在。 我們需要將事件偵聽器附加到任務項的祖先上。 我們可以使用div#container作為祖先並將每個新任務插入其中。

  const container = document.querySelector('div#container')

  const html = `
    <div>
      <input type="checkbox" id="task${i}" name="task${i}">
      <label for="task${i}">${task}</label><br>
      <button class="delete">Delete</button>
    </div>
  `
  container.insertAdjacentHTML('afterbegin', html)

我們可以在容器上附加一個單擊監聽器，它將事件委托給任何將被單擊的新刪除按鈕。

  container.addEventListener('click', e => {
    document.querySelectorAll('button.delete').forEach(button => {
      if (button.contains(e.target)) {
        // ...delete the task item
      }
    })
  })