在javascript中创建一个删除按钮

我创建了一个列表来添加项目，然而，我也试图添加一个删除按钮来删除任何项目，被添加到我的列表，但我不能让它工作，

参见下面的代码片段

const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");
form.addEventListener("submit", (e) => {
e.preventDefault();
const item = fruitName.value;
const numOfItmes = qty.value;
const newLi = document.createElement("li");
newLi.innerText = `${numOfItmes} ${item}`;
list.appendChild(newLi);
button.addEventListener("click", () => {
const button = document.createElement("button");
button.textContent = "X";
li.appendChild(button);
});
form.qty.value = "";
form.fruitName.value = "";
});

button {
width: 100px;
height: 100px;
margin: 20px;
}
#fruit {
width: auto;
height: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="color.css" />
<title>Document</title>
</head>
<body>
<h1>Welcome!</h1>
<form action="test">
<label for="item">Enter Product</label>
<input type="text" id="fruitName" />
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty" />
<button id="fruit">Submit</button>
</form>
<ul id="list"></ul>
<script src="color.js"></script>
</body>
</html>

我创建了一个列表来添加项目到它，然而，我也试图添加一个删除按钮来删除任何项目被添加到我的列表，但我不能让它工作，

见下面的代码

const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");
form.addEventListener("submit", (e) => {
e.preventDefault();
const item = fruitName.value;
const numOfItmes = qty.value;
const newLi = document.createElement("li");
newLi.innerText = `${numOfItmes} ${item}`;
list.appendChild(newLi);
button.addEventListener("click", () => {
const button = document.createElement("button");
button.textContent = "X";
li.appendChild(button);
});
form.qty.value = "";
form.fruitName.value = "";
});

<h1>Welcome!</h1>
<form action="test">
<label for="item">Enter Product</label>
<input type="text" id="fruitName" />
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty" />
<button id="fruit">Submit</button>
</form>
<ul id="list"></ul>

有谁能帮我一下吗?

您在错误的位置创建了li的子button元素，并且在单击li时根本没有删除它。下面是工作代码:

const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");
form.addEventListener("submit", (e) => {
e.preventDefault();
const item = fruitName.value;
const numOfItmes = qty.value;
const newLi = document.createElement("li");
newLi.innerText = `${numOfItmes} ${item}`;
list.appendChild(newLi);
// create button outside of event listener
const button = document.createElement("button");
button.textContent = "X";
newLi.appendChild(button);
// remove the created li element when button is clicked
button.addEventListener("click", () => {
newLi.remove();
});
form.qty.value = "";
form.fruitName.value = "";
});

<h1>Welcome!</h1>
<form action="test">
<label for="item">Enter Product</label>
<input type="text" id="fruitName" />
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty" />
<button id="fruit">Submit</button>
</form>
<ul id="list"></ul>

相关内容

最新更新

热门标签：