如何使用原生JavaScript删除动态创建的表单元素

问题根因 #

你遇到的问题来源于两点：

1. 初始化执行querySelectorAll(".delete-ingredient")时，动态生成的删除按钮还没有被渲染到页面，查询结果为空，事件绑定完全无效
2. 每次新增食材时通过innerHTML重写整个.show-ingredients容器的内容，之前绑定在DOM节点上的事件会随着旧节点销毁全部失效，因此即使在新增逻辑内重复绑定事件，除最新生成的按钮外其余按钮的事件都会失效

实现方案 #

采用事件委托方案处理动态元素的点击事件，不需要为每个新增的删除按钮单独绑定事件，性能与可维护性更高。修改后的完整JS代码如下：

const ingredients = () => {
  const container = document.querySelector(".show-ingredients");
  const addBtn = document.querySelector(".add-ingredient");
  const newIngredient = document.querySelector("#input-ingredients");
  let ingredients = [];
  newIngredient.required = true;

  addBtn.addEventListener("click", () => {
    // 新增空值校验，避免添加空白食材
    if (!newIngredient.value.trim()) return;
    newIngredient.required = false;
    ingredients.push(newIngredient.value.trim());
    renderIngredients();
    newIngredient.value = "";
  });

  // 抽离公共渲染逻辑，新增、删除操作统一调用
  function renderIngredients() {
    container.innerHTML = ingredients.map((val, index) => `
        <div class="ingredient-container" data-index="${index}">
            <input class='ingredient' type="text" value='${val}' required >
            <div class="controls delete">
                <a class="delete-ingredient">
                    <span class="ingredient-bar"></span>
                </a>
            </div>
        </div>`).join("");
    // 食材为空时恢复原始输入框的必填校验
    newIngredient.required = ingredients.length === 0;
  }

  // 事件委托：将删除事件绑定到始终存在的父容器上
  container.addEventListener("click", (e) => {
    // 匹配删除按钮的点击事件
    if (e.target.closest(".delete-ingredient")) {
      // 获取当前食材对应的数组索引
      const curIndex = +e.target.closest(".ingredient-container").dataset.index;
      // 移除对应食材
      ingredients.splice(curIndex, 1);
      // 重新渲染列表
      renderIngredients();
    }
  });
};
ingredients();

核心修改说明 #

• 抽离独立的渲染逻辑，新增和删除操作复用同一套渲染代码，避免逻辑冗余
• 给每个食材容器添加data-index属性存储对应数组索引，删除时可直接定位要操作的数组项
• 采用事件委托机制，利用事件冒泡特性监听父容器的点击事件，所有动态生成的删除按钮都可以触发删除逻辑，不需要重复绑定事件
• 新增空值校验逻辑，避免用户输入空白内容生成无效食材项

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