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

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 元素从头开始重做我的代码以追加孩子。完成后，这使一切变得更加容易。决定改变它，让自己更灵活地使用代码。