如果所有项目都具有相同的 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/

Yo 需要遍历所有元素并添加一个事件侦听器。在新元素上运行 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');

相关内容

最新更新

热门标签：