列表项和删除线功能 (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>