將事件偵聽器添加到 <li> 使用javascript創建的

Question

我對在JS中處理DOM中的元素非常陌生，因此我正在創建一個簡單的待辦事項列表，以使其更加舒適，並且可以在其中使用輸入來添加項目，並通過單擊列表項來刪除項目。 盡管這可能不是最佳實踐，但我只是想使用create和remove元素，而不是使用對象或類，直到我變得更熟悉為止，也要使用普通/香草js，因此在回答時請記住這一點。

我想添加一個點擊事件，刪除<li>的當<li>點擊。

我的邏輯是...加載頁面后，我不能僅對所有<li>進行for循環並添加事件處理程序，因為所有<li>都不存在。 因此，我嘗試的解決方案是觸發addTaskButton事件時，我們獲得事件發生時頁面上的所有<li> ，我們遍歷所有這些事件，並向<li>添加一個eventlistener等待點擊時被刪除。

這似乎不起作用，並且可能過於復雜。

有人可以像我5歲時那樣簡單地向我解釋一下，為什么這不起作用，或者有什么更好的方法可以做到這一點？

先感謝您

的HTML

<ul id="taskList">
    <li>example</li>

</ul>
<input type="text" id="addTaskInput">
<button id="addTaskButton">Add Task</button>

的JavaScript

const taskList = document.querySelector("#taskList");
const addTaskInput = document.querySelector("#addTaskInput");
const addTaskButton = document.querySelector("#addTaskButton");
let taskItem = document.querySelectorAll("li");


addTaskButton.addEventListener("click", () => {
    let taskItem = document.createElement("li");
    taskItem.textContent = addTaskInput.value;
    for (let i = 0; i < taskItem.length; i++) {     
        taskItem[i].addEventListener("click", () => {
            let taskItem = document.querySelectorAll("li");
            taskList.removeChild(taskItem[i]);      
        });
    }
    taskList.appendChild(taskItem);
    addTaskInput.value = " ";
});

Answer 1

這是我根據您的要求創建的代碼，此代碼在香草javascript中實現了jQuery $（document）.on機制，現在您在文檔內創建li的任何位置，單擊li都會將其刪除。

講解

它要做的是單擊文檔，檢查要單擊哪個元素（例如，target是被單擊的元素，e是文檔上的單擊事件），然后檢查被單擊的項目是否是li標簽（e.target.tagName）如果單擊該項目，則會告訴我們標簽名稱），因此，如果是li，則將其刪除；

  const taskList = document.querySelector("#taskList"); const addTaskInput = document.querySelector("#addTaskInput"); const addTaskButton = document.querySelector("#addTaskButton"); addTaskButton.addEventListener("click", () => { let taskItem = document.createElement("li"); taskItem.textContent = addTaskInput.value; taskList.appendChild(taskItem); addTaskInput.value = " "; }); document.onclick = function(e) { if(e.target.tagName == 'LI'){ e.target.remove(); } } 

 <ul id="taskList"> <li>example</li> </ul> <input type="text" id="addTaskInput"> <button id="addTaskButton">Add Task</button> 

Answer 2

像這樣更新您的for循環：

for (let i = 0; i < taskItems.length; i++) {     
    taskItems[i].addEventListener("click", () => 
        taskList.removeChild(taskItems[i]);      
    });
}

同樣，您的初始taskItem變量應該是taskItems，並反映在上面的for循環中。

Answer 3

taskList.addEventListener("click", (event) => {
     event.target.remove();
});

當指定的事件發生時，將返回事件對象。 事件對象具有多個屬性，其中之一是目標，即作為發生事件的元素的元素。 event.target返回給我們，我們將remove（）方法應用於event.target

由於事件“冒泡”或“事件傳播”，我們可以將事件處理程序附加到祖先。 最好將事件偵聽器附加到總是在DOM中的最接近的祖先元素（不會被刪除）。

觸發事件時（在這種情況下為“點擊”事件）。 所有下降的元素都將被刪除-在我們的例子中，因為只有<li> ，所以就可以了。 但是我們應該更加具體，因為在不同情況下，我們可以將此事件處理程序附加到具有幾個不同元素的div上。

為此，我們添加一個if條件來檢查tagName是<li>

if (event.target.tagName == "LI") 

請注意，必須對元素進行校准

解決方法如下

taskList.addEventListener("click", (event) => {

      if(event.target.tagName == "LI"){
         event.target.remove();
    }});

進一步閱讀：

事件對象及其屬性： https : //developer.mozilla.org/en-US/docs/Web/API/Event

事件冒泡： https ： //developer.mozilla.org/zh-CN/docs/Web/API/Event/bubbles

tagName： https : //developer.mozilla.org/zh-CN/docs/Web/API/Element/tagName