JavaScript发票生成器：点击Remove按钮仅删当前项问题求助

你的代码目前存在几个核心问题，导致点击删除时会清空所有项：

1. 给整个.render-item元素绑定点击事件，而非仅绑定Remove按钮，点击项内任意区域都会触发删除逻辑
2. 每次表单提交时重复给所有已存在的.render-item绑定事件，导致多次触发清空操作
3. 删除逻辑错误，直接清空所有渲染内容并重置总金额，而非仅移除目标项并减去对应金额

以下是修复后的完整JavaScript代码：

const theForm = document.getElementById('the-form');
const taskInput = document.getElementById('task-input');
const renderItem = document.querySelector('.render');
const selectOption = document.getElementById('amount');
const totalSum = document.getElementById('total-sum');

let totalAmount = 0;

// 事件委托：给父元素绑定一次事件，监听子元素点击
renderItem.addEventListener('click', function(e) {
  // 仅当点击的是Remove按钮时执行逻辑
  if (e.target.classList.contains('remove')) {
    // 找到当前按钮所在的.render-item容器
    const item = e.target.closest('.render-item');
    // 获取该项的金额数值
    const itemAmount = parseInt(item.querySelector('h2 span + ').textContent);
    // 从总金额中减去该项金额
    totalAmount -= itemAmount;
    // 更新总金额显示（总金额为0时清空显示）
    totalSum.textContent = totalAmount > 0 ? `$${totalAmount}` : '';
    // 移除当前项
    item.remove();
  }
});

theForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const currentAmount = parseInt(selectOption.value);
  totalAmount += currentAmount;
  renderItem.innerHTML += `
  <div class="render-item">
    <div class="left-side">
        <h2>${taskInput.value}</h2>
        <button class='remove'>Remove</button>
    </div>
    <h2><span>$</span>${currentAmount}</h2>
  </div>
  `;

  totalSum.textContent = `$${totalAmount}`;

  taskInput.value = '';
  selectOption.value = '10';
});

关键修改说明： #

• 事件委托：将点击事件绑定到.render父元素上，无需每次新增项时重复绑定事件，自动支持后续新增元素的事件触发
• 精准触发：通过e.target.classList.contains('remove')判断点击对象是Remove按钮，避免误触项内其他区域
• 正确计算总金额：找到当前删除项对应的金额，从总金额中精准扣除，而非直接重置为0
• 单项移除：使用item.remove()仅删除当前点击项对应的容器，而非清空所有渲染内容

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