如何为JavaScript中动态添加的<li>元素添加删除按钮？

问题根源 #

1. 变量引用错误：你已经通过product和quantity获取了输入框元素，但提交事件里误用了未声明的fruitName和qty，直接导致代码报错。
2. 删除按钮逻辑颠倒：你先尝试给不存在的按钮绑定点击事件，再在回调里创建按钮，还用到了未定义的li变量，完全搞反了操作顺序，按钮根本不会被正确添加和绑定事件。
3. 按钮样式冲突：默认按钮的100px宽高样式会导致删除按钮过大，影响体验。

修正后的代码 #

HTML代码（无需修改）

<!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>

CSS代码（添加删除按钮样式）

button {
  width: 100px;
  height: 100px;
  margin: 20px;
}

#fruit {
  width: auto;
  height: auto;
}

/* 删除按钮样式 */
.delete-btn {
  width: auto;
  height: auto;
  margin: 0 0 0 10px;
  padding: 2px 8px;
}

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 = product.value;
  const numOfItems = quantity.value;
  
  // 空值判断，避免添加空项
  if (!item || !numOfItems) return;

  const newLi = document.createElement("li");
  // 先设置li的文本内容
  newLi.textContent = `${numOfItems} ${item}`;

  // 创建删除按钮
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "X";
  deleteBtn.classList.add("delete-btn");
  
  // 绑定删除事件：点击按钮时移除对应的li
  deleteBtn.addEventListener("click", () => {
    newLi.remove();
  });

  // 将按钮添加到li，再将li添加到列表
  newLi.appendChild(deleteBtn);
  list.appendChild(newLi);

  // 清空输入框
  product.value = "";
  quantity.value = "";
});

内容的提问来源于stack exchange，提问作者Motty