我是JS, HTML和CSS的新手。我查了很多答案，但不能很好地理解将其应用于我的情况时的背景。按钮2是什么需要onClick功能，但我不确定如何实现突破方面。谢谢你！
我的JS如下:
window.onload = function() {
document.getElementById("submit-btn").addEventListener("click", function() {
let text = document.getElementById("text-box").value;
let li = document.createElement("li");
li.id = "liId";
li.innerText = text;
document.getElementById("unordered-list").appendChild(li);
let button = document.createElement("button");
button.innerText = "X";
button.setAttribute = ("id", "b1");
li.appendChild(button);
button.addEventListener("click", () => li.parentNode.removeChild(li));
document.getElementById("unordered-list").appendChild(li);
let button2 = document.createElement("button");
button2.innerText = "Done";
button2.id = "b2";
li.appendChild(button2);
li.appendChild(button);
li.appendChild(button2);
});
document.getElementById("b2").addEventListener("click", function () {
document.getElementById("liId").style = "text-decoration: line-through;"
});
}
HTML:
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>My First Project</title>
</head>
<body>
<script src="script.js"></script>
<header id="to-do-box">
<h1>To-Do List</h1>
<div id="top-half">
<form>
<input type="text" id="text-box" placeholder="Add an item!">
<button type="button" id="submit-btn">Submit</button>
<button type="button" id="clear-field-btn">Clear field</button>
</form>
</div>
</header>
<div id="ul">
<ul id="unordered-list"></ul>
</div>
</body>
</html>
您可以通过实现在单击按钮时激活的事件侦听器来实现这一点。这将删除显示的第一个列表元素。
document.getElementById("submit-btn").addEventListener("click", function() {
let text = document.getElementById("text-box").value;
let li = document.createElement("li");
li.setAttribute = ("id", "list");
li.id = "liId";
li.innerText = text;
document.getElementById("unordered-list").appendChild(li);
let button = document.createElement("button");
button.innerText = "X";
button.setAttribute = ("id", "b1");
li.appendChild(button);
button.addEventListener("click", () => li.parentNode.removeChild(li));
document.getElementById("unordered-list").appendChild(li);
let button2 = document.createElement("button");
button2.innerText = "Done";
button2.id = "b2";
button2.classList.add('buttonClass');
li.appendChild(button2);
li.appendChild(button);
li.appendChild(button2);
document.querySelectorAll('.buttonClass').forEach(item => {
item.addEventListener('click', event => {
change()
})})});
function change() {
document.querySelectorAll("#b2").forEach(item => {
item.parentNode.style = "text-decoration: line-through;"
})}
document.getElementById("clear-field-btn").addEventListener('click', event => {
document.querySelectorAll("#b2").forEach(item => {
item.parentNode.remove();
})
})
<html>
<body>
<header id="to-do-box">
<h1>To-Do List</h1>
<div id="top-half">
<form>
<input type="text" id="text-box" placeholder="Add an item!">
<button type="button" id="submit-btn">Submit</button>
<button type="button" id="clear-field-btn">Clear field</button>
</form>
</div>
</header>
<div id="ul">
<ul id="unordered-list"></ul>
</div>
</body>
</html>请记住，这只适用于一个列表元素，如果您想在用户有多个列表元素时丢弃所有列表元素，则需要使用forEach函数。