将事件监听器添加到< li>使用javascript创建的 [英] Adding event listeners to <li> that are created using javascript

问题描述

我对在JS中处理DOM中的元素还很陌生，因此我创建了一个简单的待办事项列表，以使其更加舒适，并且可以在其中使用输入添加项目，并通过单击列表项来删除项目. 尽管这可能不是最佳实践，但我只是想使用create和remove元素，而不是使用对象或类，直到我变得更熟悉为止，也要使用普通/香草js，所以在回答时请记住这一点.

I am quite new to manipulating elements in the DOM in JS so I am creating a simple to do list to get more comfortable and where I can add items using the input and remove items by clicking on the list item. ALthough this may not be best practice and limitting I am just wanting to use create and remove elements rather than using objects or classes until I get more familar, also using plain/vanilla js so please keep this in mind when answering.

我试图添加一个单击事件，当单击<li>时会删除<li>.

I am trying to add a click event which removes the <li> when the <li> is clicked.

我的逻辑是... 加载页面后，我不能只对所有<li>都运行for循环并添加事件处理程序，因为所有<li>都还不存在. 因此，我尝试的解决方案是触发addTaskButton事件时，获得事件发生时页面上的所有<li>，我们遍历所有这些事件，并向<li>中添加一个事件侦听器等待被点击时删除.

My logic is... When the page is loaded I can't just run a for loop over all of the <li>s and add event handlers as all of the <li>'s do not exist yet. So my attempted solution is when the addTaskButton event is triggered, we get all of the <li> that are on the page at the time of the event, we loop through all of them and add an eventlistener to <li>'s that are waiting to be removed when clicked.

这似乎不起作用，并且可能过于复杂.

This doesn't seem to work and may be overly complicated.

有人可以像我5岁时那样简单地向我解释一下，为什么这不起作用，或者有什么更好的方法呢?

Can someone please explan to me very simply like I'm 5 why this doesn't work or what a better way to do this would be?

提前谢谢

HTML

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

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

JavaScript

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 = " ";
});

推荐答案

这是我根据您的要求创建的代码，此代码在香草javascript中实现了jQuery $(document).on机制，现在您可以在文档内部创建任何li ，请点击该li即可将其删除.

Here is code i created for your requirement, this implement jQuery $(document).on mechanism in vanilla javascript, now where ever you create an li inside the document, on clicking that li it will be removed.

说明

它的作用是单击文档，以检查单击了哪个元素(例如target是被单击的元素，e是文档上的单击事件)，然后检查被单击的项目是否为li标签(例如如果单击该项目，target.tagName会告诉我们标签名称)，因此如果它是li，则将其删除；

What it does is on clicking the document it checks on which element is clicked (e.target is the clicked element, e is is the click event on document), then checks if the clicked item is an li tag (e.target.tagName will tell us the tag name if the item clicked), so if it is an li just remove it;

	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>

这篇关于将事件监听器添加到< li>使用javascript创建的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！