如何將刪除按鈕添加到 HTML 的列表中？

Question

我正在制作一個剪貼板歷史擴展，將用戶的剪貼板數據存儲在localStorage中。 我已經完成了background工作，因此數據將以以下格式存儲：

{list: [{text: <text that was copied>,
 date: <date when it was copied by ms>,
 current: <boolean; if the value is currently copied>]}

我對popup.html進行了編碼，並設法創建了一個復制項目列表。 每個框中都有一組按鈕，可用於刪除和復制每個數據。

按下按鈕時，我需要運行 function deleteItem(ind) ，並將ind值設置為項目的索引。

每個框都是使用cloneNode在forEach中創建的，所以我不知道會有多少按鈕。

我試過了：

document.getElementsByClassName("delete")[numOfRows-1].addEventListener('click', deleteItem(numOfRows-1))

// The button element is currently not in HTML
document.getElementsByClassName("button_container")[numOfRows-1].innerHTML = "<button onclick='deleteItem(" + (numOfRows-1).toString() + ")'>Delete</button>"

document.getElementsByClassName("delete")[numOfRows-1].onClick = Function('deleteItem(" + (numOfRows-1).toString() + ")')()

第一個不起作用，因為numOfRows在forEach運行時不斷變化，這使得它刪除了錯誤的項目。

由於content security policy ，第二個和第三個將不起作用。

有沒有辦法可以為每個項目添加事件偵聽器？

Answer 1

創建所有框后，使用循環在每個刪除/復制框中運行刪除和復制事件偵聽器。

例子：

// selects all delete buttons
var deletes = document.querySelectorAll('.delete');
// loops through each delete button
for (var i = 0; i < deletes.length; i++) {
  // adds event listener to each delete button
  deletes[i].addEventListener('click', function(event) {
    // whatever you want to do when the delete button is clicked
    // Note: event.target will be the button that was clicked, do not use deletes[i]
  });
}

// same as the delete buttons, but for copying
var copies = document.querySelectorAll('.copy');
for (var i = 0; i < copies.length; i++) {
  copies[i].addEventListener('click', function(event) {
    // your code
  });
}