無法獲取刪除關閉列表項的按鈕

Question

我有點吃不消了。

我試圖讓一個按鈕在單擊時刪除其父級。

但是當我運行代碼時它不會響應。 事實上，它根本不會刪除任何東西。

我已經指定了IF() event.target === deleteButton{ remove parent}

但它要么無法識別事件，要么無法找到父事件。

一點幫助將不勝感激！

我

 const todoListElement = document.getElementById('ordered-todo-list'); const form = document.getElementById('todo-form'); const deleteButton = document.querySelector('.delete'); todoListElement?.addEventListener("click", todoListEraser) function todoListEraser( event:MouseEvent) { console.log(event.target) if (event.target === deleteButton ){ (event.target as HTMLElement).closest('li')?.remove(); } else { return console.log('did not work, try again'); } }

 <template id="list-item-template"> <li class="list-item"> <input type="checkbox" class="status-toggle" name="form-checkbox"> <p class="task-text"></p> <button class="delete" >X</button> </li> </template> <ol id="ordered-todo-list"> </ol>

我在 typescript 工作。

Answer 1

我的回答可能完全不符合您的需要，但這似乎不是您的完整代碼，所以我不得不進行一些猜測。

我可以通過兩種方式看到這一點。 如果您的模板中的<li>元素在此 JavaScript 執行之前添加到列表中，您可以使用第一種方法（注釋掉）。 如果在執行此 JavaScript 之后添加模板中的<li>元素，則第二種方法應該可以正常工作。

 /* // Method 1 document.querySelectorAll(".delete").forEach(el => { el.addEventListener("click", e => { e.target.parentElement.remove(); }); }); */ // Method 2 document.querySelector("#ordered-todo-list").addEventListener("click", e=> { if(e.target.className.includes("delete")) { e.target.parentElement.remove(); } });

 <ol id="ordered-todo-list"> <li class="list-item"> <input type="checkbox" class="status-toggle" name="form-checkbox"> <p class="task-text"></p> <button class="delete" >X</button> </li> <li class="list-item"> <input type="checkbox" class="status-toggle" name="form-checkbox"> <p class="task-text"></p> <button class="delete" >X</button> </li> <li class="list-item"> <input type="checkbox" class="status-toggle" name="form-checkbox"> <p class="task-text"></p> <button class="delete" >X</button> </li> </ol>

方法 1將事件偵聽器添加到刪除按鈕本身。 然后它只是刪除了parentElement 。

方法 2將事件偵聽器添加到<ol>元素，並通過檢查className屬性來檢查單擊的元素 ( e.target ) 是否是刪除按鈕。