我不打算删除与每个列表相对应的列表项。即使我附带了remove child方法，仍然有些混乱，出现错误并停留在同一点。
建议我如何以更好，更高效的方式编写代码！！！并且我在添加罢工后附加了我的代码
请帮助我
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.getElementsByTagName("li");
function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
for(var i=0; i<li.length; i++)
{
li[i].addEventListener("click", function(event)
{
event.target.classList.toggle("done");
});
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);.done {
text-decoration: line-through;
}<!DOCTYPE html>
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<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>
<!-- <li class="bold red" random="23">Notebook</li><button id="delete">delete</button>
<li>Jello</li><button id="delete">delete</button>
<li>Spinach</li><button id="delete">delete</button>
<li>Rice</li><button id="delete">delete</button>
<li>Birthday Cake</li><button id="delete">delete</button>
<li>Candles</li><button id="delete">delete</button> -->
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>您需要将<button>放在<li>元素内，并在其上放置click事件，如下所示：
if( event.target.classList.contains('done') ) {
// add delete button
const buttonElem = document.createElement('button');
buttonElem.innerText = 'delete';
buttonElem.onclick = function() { // remove list item here
this.parentElement.remove()
};
event.target.appendChild(buttonElem);
} else {
// remove the delete button
event.target.getElementByTagName('button').remove();
}
这应该在click切换后位于done事件侦听器内。基本上，如果列表项classList包含done类，则在li elem内添加一个带有预定义事件处理程序的按钮。在onclick内部，this包含发生点击的实际元素（button）。这就是为什么我们使用parentElement将DOM树向上一级并调用remove()函数，从而将整个li元素从DOM中删除的原因。如果done类不存在，则意味着任务“已撤消”，按钮本身需要移除。
另一方面，我宁愿使用数组中的列表并使用“渲染”功能。这样，将有一个“事实真相”。就像我一直说的...将逻辑放在JS中，然后让HTML仅对此做出反应。