javascript - 如何向列表中添加的每个 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

我为每个新创建的 button 添加了一个类 - .deletebtn，并为每个将单独执行的按钮附加了一个 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>