通過向它們添加事件偵聽器來刪除新添加的元素

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>