JS动态创建的第二组delete-btn按钮点击事件无法触发问题排查

删除按钮事件无法触发的核心原因是事件绑定时机错误：

• add-btn是页面初始加载渲染餐品列表时就存在的元素，diplayMenuItems函数运行时能直接查询到这些按钮，所以事件绑定正常
• delete-btn是用户点击add-btn之后才会被动态插入DOM的元素，你在diplayMenuItems初始执行阶段就用querySelectorAll('.delete-btn')查询元素时，页面里还没有任何删除按钮，拿到的是空节点列表，自然无法给不存在的元素绑定事件。

你可以任选以下一种方案修复：

方案1：创建删除按钮时即时绑定事件 #

在add-btn的点击回调里，把包含删除按钮的列表项插入DOM后，立刻给当前生成的删除按钮绑定事件，删掉原来全局查询删除按钮绑定事件的冗余代码即可。
修改后的核心代码片段：

const addBtns = document.querySelectorAll('.add-btn');
addBtns.forEach(function(btn){
  btn.addEventListener('click', function(e){
    const title = e.currentTarget.dataset.title;
    const price = e.currentTarget.dataset.price;
    const para = document.createElement('div');
    para.classList.add('item-list');
    para.innerHTML = `<p class="item">${title}</p>
     <p class="item">${price}</p> 
     <button class="delete-btn" data-title="${title}">x</button>`
    listContainer.appendChild(para);
    // 给刚生成的删除按钮绑定事件
    const currentDeleteBtn = para.querySelector('.delete-btn');
    currentDeleteBtn.addEventListener('click', function(){
      console.log(title);
      para.remove(); // 点击时移除对应餐品条目
    })
  });
});
// 删掉原来下方查询deleteBtns、绑定事件的整段无效代码

方案2：使用事件委托（推荐） #

利用事件冒泡机制，直接给页面初始就存在的删除按钮父容器listContainer绑定点击事件，不用给每个动态生成的删除按钮单独绑定事件，后续新增多少列表项都能正常触发删除逻辑，性能更好。
操作方式：删掉原来全局查询删除按钮绑定事件的代码，添加如下事件绑定逻辑即可：

// 给固定存在的父容器绑定委托事件
listContainer.addEventListener('click', function(e){
  // 判断点击的目标是否为删除按钮
  if(e.target.matches('.delete-btn')){
    const title = e.target.dataset.title;
    console.log(title);
    // 移除对应餐品条目
    e.target.closest('.item-list').remove();
  }
})

注：你的函数名diplayMenuItems存在拼写错误（正确拼写应为displayMenuItems），该问题不影响当前代码运行，但建议修正避免后续调用出错。

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