Javascript 如何在HTML中向列表添加删除按钮？

我正在制作一个剪贴板历史扩展，它将用户的剪贴板数据存储在

localStorage

中。我已经完成了

后台的工作

，因此数据将以以下格式存储：

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

第一个选项不起作用，因为

numorrows

在运行

forEach

时不断更改，这使得它删除了错误的项

由于

内容安全策略

，第二个和第三个将不起作用

---

是否有一种方法可以将事件侦听器添加到每个项目？

创建所有框后，使用循环在每个“删除/复制输入”框上运行事件侦听器进行删除和复制

例如：

//选择所有删除按钮
var deletes=document.querySelectorAll（'.delete'）；
//循环浏览每个删除按钮
for（var i=0；i

我尝试过使用它，但问题是我的

deleteItem

函数需要单击按钮的索引。如果我输入

deleteItem（I）

，则值

I

会随着

for

语句的运行而变化，这样按钮在单击时会删除列表中的错误项。当使用for循环创建框时，也会在每个框中创建按钮。使用for循环的当前索引为每个输入添加自定义属性，类似于

。然后在事件侦听器上，您可以执行

var index=event.target.getAttribute（'data-value'）。一旦有了索引，就可以删除该项。每次删除后，您都必须重新生成框，以便更新索引。
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() + ")')()