Javascript 关于带按钮的模板字符串循环的建议

我目前正在开发一个小型web应用程序，希望得到一些建议。我知道我的问题的原因，我知道一种解决方法，但这意味着我已经做了很多工作

我遇到的问题是，我目前正在for循环中使用模板字符串来打印数据，并且我有一个带有侦听器的delete按钮。目前它只对列表中的最后一个按钮起作用，我知道这是因为我每次使用html=x时都在销毁innerHTML

我想知道的是…有没有一个简单的方法来解决这个问题，或者我应该用append-child等来代替

        for(let prod of products){
           console.log("Doc ID",doc.id);

        const li1 = `
            <p><div>${prod.name} <div class="right"><font class=pink-text>Location:</font> $${prod.location}  <button data-remove-button-id="${doc.id}" class="btn-remove">Delete</button></div></div></p>
        `;
        html += li1;

        } //end for loop




        const li2 = `
            <br />
            <button class="btn blue darken-2 z-depth-0 right modal-trigger" data-target="modal-prodedit">Add/Edit Attributes</button><br />
            </div>
            </li>
        `;
        html += li2;                    

        productList.innerHTML = html;


        const removeBtn = document.querySelector(`[data-remove-button-id="${doc.id}"]`);
        console.log("removeBTN",removeBtn);
        removeBtn.addEventListener('click', (e) => {
          e.preventDefault();
            console.log(`deleted row ${e.target.dataset.removeButtonId}`);
          });

for（让产品生产）{
控制台日志（“文档ID”，文档ID）；
常数li1=`
${prod.name}位置：$${prod.Location}删除

`;
html+=li1；
}//循环结束
常数li2=`


添加/编辑属性


`;
html+=li2；
productList.innerHTML=html；
const removeBtn=document.querySelector（`[data remove button id=“${doc.id}]”）；
日志（“removeBTN”，removeBTN）；
removeBtn.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
log（`deleted row${e.target.dataset.removeButtonId}`）；
});

您正在使用querySelector（）方法，该方法返回它找到的第一个元素。如果要将该侦听器附加到需要使用的所有行。您需要区分选择了哪一行，哪一行似乎不在DOM模型中。因此，我将在您的按钮中添加一个

数据产品id

属性，听众可以使用该属性来知道删除了哪个产品。

感谢大家对这一点的帮助

---

SelectAll在某种程度上起了作用，但我决定从头开始使用DOM元素重新编写代码。一旦完成，一切都变得简单多了。决定对其进行更改，以使自己在代码方面具有更大的灵活性。

是的，您可能应该使用DOM方法，而不是

innerHTML

，但如果您只在所有按钮上安装处理程序，而不是只在单个按钮上安装，您的方法仍然可以工作？使用

querySelectorAll

。

doc.id

来自何方？我使用的是Firestore数据库，因此doc.id就来自

code

doc.ref.collection（“供应商”）.get（）。然后（（快照）=>{const vendors=Snapshot.docs.map（doc=>doc.data（））；console.log（doc.id，“=>”，供应商）；我将尝试querySelectorAll并查看它对我的作用……如果不是，我将使用DOM方法。谢谢。即使我已经有了数据删除按钮id=“${doc.id}”，我仍然需要数据产品id吗？是的。据我所知，从您的示例来看，每行doc.id没有变化。所有行的值都相同，因此单击第1行上的“删除”与第2行上的“删除”，如果侦听器仅使用doc.id，则不会做任何不同的事情。这就是为什么我推断您需要在“删除”按钮侦听器中使用product.id。要使它做一些不同的事情per row.ahhh ok。yes doc.id作为Firestore数据库中每一行的不同值返回。因此，对于数据库中的每个产品执行for of循环时，它将返回数据库中分配的唯一id。我还在console.log输出中确认了这一点。