[英]How can delete the clicked item using the click event if all items have the same Id
我正在尝试仅删除选定的列表项，但仅当在代码中手动添加该项并使用 javascript 进行注释时才有效，但我想使用代码在列表中添加和删除元素，请帮忙，谢谢。 我希望能够将元素添加到 ul 元素并在单击右上角的 x 时将其删除。
<div class="todocontent">
<ul id="todolist" class="todolist">
<li id="todoitem" class="todoitem">
<div class="todotextheader">
<div class="todotxthd"><h3>To do note Header</h3></div>
<div class="delete"><i id="deletex" class="far fa-window-close deletex" ></i>
</div>
</div>
<div class="todotext">
<p>this is the main text of the todo note</p>
</div>
</li>
</ul>
</div>
<div class="addcontainer">
<div class="addtextheader">
<input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50">
</div>
<div class="addtext">
<textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea>
</div>
<div class="addbtn">
<button id="add">+</button>
</div>
</div>
我的js：
document.getElementById('add').addEventListener('click', function(){
//get the text and the text header from the fields
var addtxtheader = document.getElementById('addtxtheader').value;
var addtxt = document.getElementById('addtxt').value;
// get the list
var list = document.getElementById('todolist');
//create elements
var listitem = document.createElement('li')
var todotxtheader = document.createElement('div');
var todotxthd = document.createElement('div');
var deleteitem = document.createElement('div');
var deletex = document.createElement('i');
var todohtxt = document.createElement('h3');
var todotext = document.createElement('div');
var todotxt = document.createElement('p');
//add classes to their respected elements
listitem.classList.add('todoitem');
todotxtheader.classList.add('todotextheader');
todotxthd.classList.add('todotxthd');
deleteitem.classList.add('delete');
todotext.classList.add('todotext');
//append elements
list.insertBefore(listitem, list.childNodes[0])
listitem.appendChild(todotxtheader);
todotxtheader.appendChild(todotxthd);
todotxthd.appendChild(todohtxt);
todotxtheader.appendChild(deleteitem);
deleteitem.appendChild(deletex);
deletex.innerHTML = '<i id="deletex" class="far fa-window-close deletex" >'
listitem.appendChild(todotext);
todotext.appendChild(todotxt)
//assign the input value
todohtxt.innerHTML = addtxtheader;
todotxt.innerHTML = addtxt;
})
document.getElementById('deletex').addEventListener('click', function(){
var item = this.parentNode.parentNode.parentNode;
var parent = item.parentNode;
parent.removeChild(item);
})
我的代码： https : //jsfiddle.net/c2rkm7tx/
你需要遍历所有元素并添加一个事件侦听器。 在新元素上运行 addListener 函数以在新元素上添加事件侦听器.. 你可以看到我的例子
document.getElementById('add').addEventListener('click', function(){ document.getElementById('todolist').innerHTML += '<li id="todoitem" class="todoitem">'+ '<div class="todotextheader">'+ '<div class="todotxthd">'+ '<h3>'+ document.getElementById('addtxtheader').value+ '</h3>'+ document.getElementById('addtxt').value + '</div>'+ '<div class="delete"><i id="deletex" class="far fa-window-close deletex" ></i></div>'+ '</div>'+ '<div class="todotext">'+ '<p>this is the main text of the todo note</p>'+ '</div></li>'; addListener() }) function addListener(){ var elements = document.getElementsByClassName('delete'); for(var element in elements){ elements[element].addEventListener('click', function(e){ e.target.parentNode.parentNode.parentNode.remove(); }) } } addListener();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ToDo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.css"> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link rel="stylesheet" href="todo.css"> </head> <body> <div class="addcontainer"> <div class="addtextheader"> <input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50"> </div> <div class="addtext"> <textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea> </div> <div class="addbtn"> <button id="add">+</button> </div> </div> <div class="todocontainer"> <div class="todoheader"> <h1>TO DO DONE</h1> </div> <div class="todocontent"> <ul id="todolist" class="todolist"> <li id="todoitem" class="todoitem"> <div class="todotextheader"> <div class="todotxthd"><h3>To do note Header</h3></div> <div class="delete"><i id="deletex" class="far fa-window-close deletex" ></i></div> </div> <div class="todotext"> <p>this is the main text of the todo note</p> </div> </li> </ul> </div> <div class="addcontainer"> <div class="addtextheader"> <input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50"> </div> <div class="addtext"> <textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea> </div> <div class="addbtn"> <button id="add">+</button> </div> </div> </div> <script src="todo.js"></script> </body> </html>
这是您问题的简单解决方案！ 对不起，如果我没有理解你的意思..
document.getElementById('add').addEventListener('click', function(){ //get the text and the text header from the fields var addtxtheader = document.getElementById('addtxtheader').value; var addtxt = document.getElementById('addtxt').value; // get the list var list = document.getElementById('todolist'); //create elements var listitem = document.createElement('li') var todotxtheader = document.createElement('div'); var todotxthd = document.createElement('div'); var deleteitem = document.createElement('div'); var deletex = document.createElement('i'); var todohtxt = document.createElement('h3'); var todotext = document.createElement('div'); var todotxt = document.createElement('p'); //add classes to their respected elements listitem.classList.add('todoitem'); todotxtheader.classList.add('todotextheader'); todotxthd.classList.add('todotxthd'); deleteitem.classList.add('delete'); todotext.classList.add('todotext'); //append elements list.insertBefore(listitem, list.childNodes[0]) listitem.appendChild(todotxtheader); todotxtheader.appendChild(todotxthd); todotxthd.appendChild(todohtxt); todotxtheader.appendChild(deleteitem); deleteitem.appendChild(deletex); deletex.innerHTML = '<i id="deletex" class="far fa-window-close deletex" >' listitem.appendChild(todotext); todotext.appendChild(todotxt) //assign the input value todohtxt.innerHTML = addtxtheader; todotxt.innerHTML = addtxt; }) document.addEventListener('click', function(e){ e=(e||window.event); e.preventDefault(); const path=e.path; path.forEach(elem=>{ if(elem!=window&&elem!=document&&elem!=document.documentElement) { if(elem.id=="deletex"){ var item = elem.parentNode.parentNode.parentNode; var parent = item.parentNode; parent.removeChild(item); } } }); })
<div class="todocontent"> <ul id="todolist" class="todolist"> <li id="todoitem" class="todoitem"> <div class="todotextheader"> <div class="todotxthd"><h3>To do note Header</h3></div> <div class="delete"><i id="deletex" class="far fa-window-close deletex" >X</i> </div> </div> <div class="todotext"> <p>this is the main text of the todo note</p> </div> </li> </ul> </div> <div class="addcontainer"> <div class="addtextheader"> <input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50"> </div> <div class="addtext"> <textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea> </div> <div class="addbtn"> <button id="add">+</button> </div> </div>
您的解决方案应该已经工作得更简洁一些：
document.getElementById('todoitem').addEventListener('click', function(event){
if(event.originalTarget.id == "deletex"){
this.parentElement.removeChild(this);
}
})
它的作用是将事件处理程序绑定到它自己的 ToDo 项。 正弦 DOM 事件会冒泡，当有人点击列表项时，它会被触发，它会检查该点击是否在 deletex 项上，如果是，它将自行删除。
创建对象时，将此事件侦听器绑定到对象上。
//create elements
var listitem = document.createElement('li')
listitem.addEventListener('click', function(event){
if(event.originalTarget.id == "deletex"){
this.parentElement.removeChild(this);
}
})
var todotxtheader = document.createElement('div');
var todotxthd = document.createElement('div');
如何创建一个单击事件，其中我有多个 div，并且每个 div 都有一个具有相同 Id 的按钮，但单击时仅影响父 div，如何？
[英]How can I create a click event where I have several div's and each having a button with the same Id but when clicked only affect the parent div, how?
如何使用类注册click并获取jquery中被单击项的ID？
[英]How to register click using class and get the id of the clicked item in jquery?
当这些元素都具有相同的 ID 时，有没有办法只删除单击的元素？
[英]Is there a way to delete only clicked element when those elements all have the same ID?
如何删除被点击的元素，而不是删除除了被点击的项目之外的所有项目？
[英]How can I remove the element that is clicked, instead of all items being deleted except the item clicked?
如何在同一单击事件 Jquery 的无序列表中获取先前单击的列表项
[英]How do I get the previously clicked list item in an unordered list in same click event Jquery
如何使用onclick事件单击一个图像，并在同一网页上更改另一个图像？
[英]How can I click on one image using the onclick event and have it change another image on the same webpage?
当所有元素具有相同的类名时，如何获取被点击元素的id？
[英]How to get id of the clicked element when all of the elements have the same class name?
连续两次单击触发链接时，如何防止click事件执行相同的查询
[英]How can I prevent a click event from executing the same query when the triggering link is clicked twice in a row
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.