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

Question

我目前正在开发一个迷你 Web 应用程序，希望得到一些建议。我知道我的问题的原因，我知道解决它的一种方法，但这意味着取消我已经完成的很多工作。我遇到的问题是我目前在 for 循环中使用模板字符串来打印数据，并且我有一个带有侦听器的删除按钮。目前它仅适用于列表中的最后一个按钮，我知道这是因为每次使用 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}`);          });

Answer 1

您正在使用 querySelector() 方法，该方法返回它找到的第一个元素。如果要将该侦听器附加到所有行，则需要使用Document.querySelectorAll()。您需要区分选择了哪一行，这似乎不在您的 DOM 模型中。所以我会data-product-id为您的按钮添加一个属性，侦听器可以使用它来知道哪个产品被删除了。

Answer 2

SelectAll 在一定程度上起作用，但我决定使用 DOM 元素从头开始重做我的代码以追加孩子。完成后，这使一切变得更加容易。决定改变它，让自己更灵活地使用代码。