列表项和删除线功能的删除按钮（JavaScript）

Question

我要做什么：

我需要通过单击相应的列表项来使列表项具有可删除线（单独）。

我还需要为每个列表项添加一个删除按钮。

该基础是我正在学习的有关Web开发的课程的练习材料。到目前为止，我已经弄清楚了如何在每个新列表项之后添加删除按钮并为其赋予属性。但是我不知道如何添加删除线功能，也不知道使每个删除按钮删除父li元素的最佳方法。我正在寻找解决方案和一些指导。预先感谢！

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLength() {
  return input.value.length;
}

function createListElement() {
  var li = document.createElement("li");
  var btnDelete = document.createElement("button");
  li.appendChild(document.createTextNode(input.value));
  btnDelete.appendChild(document.createTextNode("Delete"));
  // btnDelete.setAttribute("id", "buttonitem"+returnIdNumber());
  btnDelete.setAttribute("class", "delete");
  li.appendChild(btnDelete);
  ul.appendChild(li);
  input.value = "";
}

// function listLength() {
// 	return document.querySelectorAll("li").length;
// }

// function returnIdNumber() {
// 	return listLength()+1;
// }

function addListAfterClick() {
  if (inputLength() > 0) {
    createListElement();
  }
}

function addListAfterKeypress(event) {
  if (inputLength() > 0 && event.keyCode === 13) {
    createListElement();
  }
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 40px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey;
}

.done {
  text-decoration: line-through;
}

.delete {
  margin-left: 5px;
}

<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
  <li class="bold red" random="23">Notebook</li>
  <li>Jello</li>
  <li>Spinach</li>
  <li>Rice</li>
  <li>Birthday Cake</li>
  <li>Candles</li>
</ul>

到目前为止，我的JavaScript（注释部分是一种可能的ID系统解决方法，但认为它过于复杂，对吗？）：

Answer 1

在为输入值创建textnode时，请保持其跨度。并且onclick可以访问以下单击元素的子元素

li.onclick = function() {
  var text = this.children[0].innerText.strike(); // text will will hold <strike>User Input</strike>
  this.children[0].innerHTML = text; // As there is html in text, use innerHTML
}

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLength() {
  return input.value.length;
}

function createListElement() {
  var li = document.createElement("li");
  var btnDelete = document.createElement("button");
  var inp = document.createElement("span");
  inp.appendChild(document.createTextNode(input.value));
  //li.appendChild(document.createTextNode(input.value));
  btnDelete.appendChild(document.createTextNode("Delete"));
  btnDelete.setAttribute("class", "delete");
  li.appendChild(inp);
  li.appendChild(btnDelete);
  ul.appendChild(li);
  input.value = "";
  li.onclick = function() {
    var text = this.children[0].innerText.strike();
    this.children[0].innerHTML = text;
  }
}

function addListAfterClick() {
  if (inputLength() > 0) {
    createListElement();
  }
}

function addListAfterKeypress(event) {
  if (inputLength() > 0 && event.keyCode === 13) {
    createListElement();
  }
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 40px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey;
}

.done {
  text-decoration: line-through;
}

.delete {
  margin-left: 5px;
}

<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
  <li class="bold red" random="23">Notebook</li>
  <li>Jello</li>
  <li>Spinach</li>
  <li>Rice</li>
  <li>Birthday Cake</li>
  <li>Candles</li>
</ul>