通过向它们添加事件侦听器来删除新添加的元素

Question

我想从购物清单中删除项目，在html中很容易添加的元素正在成功删除。 但是，无论何时将新元素添加到列表中，该元素都不会被删除，并且会显示出不受欢迎的行为。

这是我的代码：

 var del = document.getElementsByClassName("delete"); var ul = document.querySelector("ul"); var liElements = document.querySelectorAll("li"); //Creating delete button function createDeleteButton() { var delButton = document.createElement("button"); delButton.classList.add("delete"); delButton.appendChild(document.createTextNode("Delete")); addEventListnerToNewlyAddedDeleteItem(document.getElementsByClassName("delete").length); return delButton; } //Adding event listner to newly added delete button. function addEventListnerToNewlyAddedDeleteItem(i) { del = document.getElementsByClassName("delete"); del[i - 1].addEventListener("click", function(event) { deleteListElement(i); }); } //Adding event listners to delete buttons specified in html file. for (let i = 0; i < del.length; i++) { del[i].addEventListener("click", function(event) { deleteListElement(i); }); } //Function to remove list element function deleteListElement(i) { ul.removeChild(liElements[i]); }

 <ul> <li>Birthday cake <button class="delete">Delete</button></li> <li>Candles <button class="delete">Delete</button></li> <li>Party hats <button class="delete">Delete</button></li> <li>Baloons <button class="delete">Delete</button></li> <li>Flowers <button class="delete">Delete</button></li> </ul>

Answer 1

处理动态添加元素的标准方法是利用委托侦听器的概念，而不是直接附加到可能动态创建的元素的侦听器。

这个想法依赖于事件冒泡 DOM 的概念，因此您将侦听器附加到最近的祖先元素，该元素不会被动态更改。

您的代码示例：

 const ul = document.querySelector('ul'); //Creating delete button function createDeleteButton() { const delButton = document.createElement("button"); delButton.classList.add("delete"); delButton.type = 'button'; delButton.appendChild(document.createTextNode("Delete")); return delButton; } // event listener that removes list element when button is clicked function deleteListElement(event) { const { target: btn } = event; // get the target property from the event object as a local variable btn if (btn.matches('button.delete')) { btn.closest('ul').removeChild(btn.parentElement); } } ul.addEventListener('click', deleteListElement); document.getElementById('addListElement').addEventListener('click', function() { const li = document.createElement('li'); li.textContent = 'new Listitem'; const btn = createDeleteButton(); li.appendChild(btn); ul.appendChild(li); })

 <ul> <li>Birthday cake <button class="delete" type="button">Delete</button></li> <li>Candles <button class="delete" type="button">Delete</button></li> <li>Party hats <button class="delete" type="button">Delete</button></li> <li>Baloons <button class="delete" type="button">Delete</button></li> <li>Flowers <button class="delete" type="button">Delete</button></li> </ul> <button id="addListElement" type="button">Add item</button>