[英]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.