将使用 javascript 创建的事件侦听器添加到 <li>

Question

我对在 JS 中操作 DOM 中的元素还很陌生，所以我创建了一个简单的待办事项列表以便更加舒适，我可以在其中使用输入添加项目并通过单击删除项目项目清单。虽然这可能不是最佳实践和限制我只是想使用创建和删除元素而不是使用对象或类直到我变得更加熟悉，也使用 plain/vanilla js 所以请记住这一点正在回答。

我正在尝试添加一个点击事件，它会在点击 <li> 时删除 <li>。

我的逻辑是…… 当页面加载时，我不能只运行对所有 <li> 进行循环并添加事件处理程序，因为所有 <li> 尚不存在。所以我尝试的解决方案是当触发 addTaskButton 事件时，我们获取事件发生时页面上的所有 <li>，我们遍历所有这些并向 <li> 添加一个事件监听器在单击时等待删除的。

这似乎不起作用，而且可能过于复杂。

有人可以像我 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

像这样更新你的 for 循环：

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

此外，您的初始 taskItem 变量应该是 taskItems 并反映在上面的 for 循环中。

Answer 2

这是我根据您的要求创建的代码，此实现 jQuery $(document).on 香草 javascript 机制，现在您在文档中的任何位置创建一个 li，单击它li 它将被删除。

说明

它所做的是在单击文档时检查单击了哪个元素（e.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 3

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

当指定的事件发生时，返回事件对象。事件对象有几个属性，其中之一是 target，它是事件发生的元素。 event.target 返回给我们，我们正在将 remove() 方法应用于 event.target

因为事件 "bubbling" 或 "Event Propagation"，我们可以将事件处理程序附加到祖先。最好将事件侦听器附加到最近的祖先元素，该元素始终位于 DOM 中（不会被删除）。

当事件被触发时——在本例中为 "click" 事件。所有降序元素都将被删除——在我们的例子中，因为只有 <li>，所以这很好。但我们应该更具体，因为在不同的情况下，我们可以将此事件处理程序附加到具有多个不同元素的 div。

为此，我们添加一个 if 条件来检查 tagName 是否为 <li>

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

注意元素必须大写

解决方法如下

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

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

将使用 javascript 创建的事件侦听器添加到 <li>

Adding event listeners to <li> that are created using javascript

javascript

for-loop

dom-manipulation

addeventlistener

removechild