Question

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

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

我的逻辑是...... 加载页面后，我无法在所有<li>上运行for循环，并添加事件处理程序，因为所有<li>尚不存在。所以我尝试的解决方案是在触发addTaskButton事件时，我们获取事件发生时页面上的所有<li>，我们遍历所有这些事件并向<li>添加eventlistener点击后等待删除的内容。

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

有人可以非常简单地向我解释一下，为什么这不起作用或者更好的方法是什么？

提前谢谢

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

这是我为你的需求创建的代码，这个实现jilla $（document）.on机制在vanilla javascript中，现在你在文档里面创建一个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 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();
});

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

因为事件“冒泡”或“事件传播”，我们可以将事件处理程序附加到祖先。最好将事件监听器附加到始终位于DOM中的最近的祖先元素（不会被删除）。

触发事件时 - 在这种情况下是“点击”事件。所有降序元素都将被删除 - 在我们的例子中，因为只有<li>这样就可以了。但是我们应该更具体，因为在不同的情况下，我们可以将此事件处理程序附加到具有多个不同元素的div。

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

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

请注意该元素必须是calpitalised

解决方案如下

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/en-US/docs/Web/API/Event/bubbles

的tagName： https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName

将事件侦听器添加到使用javascript

3 个答案: