前端动态设计：图书项目添加删除功能及代码调试需求

核心逻辑：给表格每一行添加删除按钮，点击时移除对应行并同步扣减总价。以下是能解决问题的完整实现代码，覆盖动态元素事件绑定、总价同步更新的关键需求：

HTML 结构 #

<!-- 图书展示区 -->
<div class="books">
  <div class="book" data-title="JavaScript高级程序设计" data-price="129">
    <img src="book1.jpg" alt="JavaScript高级程序设计">
  </div>
  <div class="book" data-title="CSS世界" data-price="89">
    <img src="book2.jpg" alt="CSS世界">
  </div>
</div>

<!-- 购物表格 -->
<table id="cartTable">
  <thead>
    <tr>
      <th>书名</th>
      <th>价格</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="cartBody"></tbody>
</table>
<div id="totalPrice">总价：0 元</div>

JavaScript 实现 #

const books = document.querySelectorAll('.book');
const cartBody = document.getElementById('cartBody');
const totalPriceEl = document.getElementById('totalPrice');
let totalPrice = 0;

// 绑定图书点击添加事件
books.forEach(book => {
  book.addEventListener('click', () => {
    const title = book.dataset.title;
    const price = parseFloat(book.dataset.price);
    
    // 可选：避免重复添加同一本书
    const isExist = Array.from(cartBody.querySelectorAll('.title')).some(item => item.textContent === title);
    if (isExist) return;
    
    // 创建表格行
    const row = document.createElement('tr');
    row.innerHTML = `
      <td class="title">${title}</td>
      <td class="price">${price.toFixed(2)}</td>
      <td><button class="deleteBtn">删除</button></td>
    `;
    
    // 给当前行的删除按钮绑定事件
    row.querySelector('.deleteBtn').addEventListener('click', () => {
      totalPrice -= price;
      totalPriceEl.textContent = `总价：${totalPrice.toFixed(2)} 元`;
      row.remove();
    });
    
    // 更新表格和总价
    cartBody.appendChild(row);
    totalPrice += price;
    totalPriceEl.textContent = `总价：${totalPrice.toFixed(2)} 元`;
  });
});

关键问题修复点 #

1. 动态元素事件绑定：之前如果只给初始页面的删除按钮绑事件，动态新增的按钮会失效。上面的代码在创建每行时直接给按钮绑事件，或者也可以用事件委托写法（更适合大量动态元素）：

// 事件委托写法示例
cartBody.addEventListener('click', (e) => {
  if (e.target.classList.contains('deleteBtn')) {
    const row = e.target.closest('tr');
    const price = parseFloat(row.querySelector('.price').textContent);
    totalPrice -= price;
    totalPriceEl.textContent = `总价：${totalPrice.toFixed(2)} 元`;
    row.remove();
  }
});

2. 总价同步更新：删除时直接从总价中扣除当前书籍的价格，避免重新遍历所有行计算的冗余，同时保证数值计算正确（用parseFloat转换价格字符串为数字）。
3. 重复添加拦截（可选）：通过检查表格中已存在的书名，防止同一本书被多次添加。

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