如何為列表中添加的每個li元素添加刪除按鈕？

Question

我已經創建了一個待辦事項列表，當您單擊它時，它會在列表項中出現一行，並且創建了一個有效的刪除按鈕。 我需要幫助的是如何為每個添加的li項目創建一個刪除按鈕。

 var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); var li = document.getElementsByTagName("li"); var btn1 = document.getElementById("btn1"); ul.addEventListener("click", function(ev) { if (ev.target.tagName === "LI") { ev.target.classList.toggle('checked'); } }, false); function inputLength() { return input.value.length; } function deleteBtn() { var myList = document.getElementsByTagName("li"); for (var i = 0; i < myList.length; i++) { deleteButton.onclick = this.parentElement.style.display = "none"; } } function createListElement() { var myList = document.getElementsByTagName("li"); var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } function addListAfterClick() { if (inputLength() > 0) { createListElement(); } } function addListAfterKeypress() { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } btn1.addEventListener("click", deleteBtn); button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterKeypress); 

 ul li.checked { text-decoration: line-through; } 

 <input id="userinput" type="text" placeholder="enter list item here"> <button id="enter">Add</button> <ul id="myUL"> <li>eggs</il><button id="btn1">delete</button> <li>milk</li> <li>tacos</li> </ul> 

在deleteBtn函數中，我嘗試添加

deleteButton = document.createElement("button");
deleteButton.appendChild.createTextNode("delete);

在for循環之后，但是我無法正常工作。 我也嘗試將其添加到createListElement函數中，但我也無法使其正常工作。 任何幫助或建議，將不勝感激。

Answer 1

我添加了一個類.deletebtn其中包含每個新創建的buttons並將click eventlistner附加到每個將單獨執行的事件。

 var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); var li = document.getElementsByTagName("li"); var btn1 = document.getElementById("btn1"); ul.addEventListener("click", function(ev) { if (ev.target.tagName === "LI") { ev.target.classList.toggle('checked'); } }, false); function inputLength() { return input.value.length; } function createListElement() { var myList = document.getElementsByTagName("li"); var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; var deleteButton = document.createElement("button"); deleteButton.appendChild(document.createTextNode("delete")); li.appendChild(deleteButton); deleteButton.onclick = function() { this.parentElement.style.display = "none"; } } function addListAfterClick() { if (inputLength() > 0) { createListElement(); } } function addListAfterKeypress() { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterKeypress); 

 ul li.checked { text-decoration: line-through; } 

 <input id="userinput" type="text" placeholder="enter list item here"> <button id="enter">Add</button> <ul id="myUL"> </ul> 

Answer 2

這個如何？ 它應該工作。

 var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); var li = document.getElementsByTagName("li"); var btn1 = document.getElementById("btn1"); ul.addEventListener("click", function(ev) { if (ev.target.tagName === "LI") { ev.target.classList.toggle('checked'); } }, false); function inputLength() { return input.value.length; } function deleteBtn() { var myList = document.getElementsByTagName("li"); for (var i = 0; i < myList.length; i++) { deleteButton.onclick = this.parentElement.style.display = "none"; } } function createListElement() { var myList = document.getElementsByTagName("li"); var li = document.createElement("li"); var btn = document.createElement("button"); btn.innerText = "delete"; btn.onclick = () => ul.removeChild(li); li.appendChild(document.createTextNode(input.value)); li.appendChild(btn); ul.appendChild(li); input.value = ""; } function addListAfterClick() { if (inputLength() > 0) { createListElement(); } } function addListAfterKeypress() { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } btn1.addEventListener("click", deleteBtn); button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterKeypress); 

 ul li.checked { text-decoration: line-through; } 

 <input id="userinput" type="text" placeholder="enter list item here"> <button id="enter">Add</button> <ul id="myUL"> <li>eggs</il><button id="btn1">delete</button> <li>milk</li> <li>tacos</li> </ul> 

Answer 3

在添加按鈕和文本時，您可以將它們都組合為<li>並在調用delete時隱藏父級。

 var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); var li = document.getElementsByTagName("li"); var btn1 = document.getElementById("btn1"); ul.addEventListener("click", function(ev) { if (ev.target.tagName === "LI") { ev.target.classList.toggle('checked'); } }, false); function inputLength() { return input.value.length; } function deleteBtn(obj) { console.log(obj); obj.parentElement.style.display = "none"; } function createListElement() { var myList = document.getElementsByTagName("li"); let node = document.createElement('li'); node.innerHTML = `${input.value}&nbsp;<button id="btn${myList.length}" onclick="deleteBtn(this)">delete</button>`; ul.appendChild(node); input.value = ""; } function addListAfterClick() { if (inputLength() > 0) { createListElement(); } } function addListAfterKeypress() { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } //btn1.addEventListener("click", deleteBtn); button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterKeypress); 

 ul li.checked { text-decoration: line-through; } 

 <input id="userinput" type="text" placeholder="enter list item here"> <button id="enter">Add</button> <ul id="myUL"> </ul> 

Answer 4

我得到了它的工作，感謝大家的幫助！