点餐APP开发：修改克隆元素的按钮文本问题

嘿，我来帮你搞定这个问题！你现在的代码已经能实现克隆行到购物车，但没处理按钮文本切换和删除功能对吧？咱们直接来修改代码，同时解决这两个问题：

核心问题分析 #

原代码只是单纯克隆了行，但没有：

• 修改克隆行里按钮的文本（从+改成-）
• 给克隆后的按钮绑定删除当前行的事件

修改后的完整代码 #

<h1>CHOOSE</h1>
<table id="starters">
  <tr>
    <th>PRODUCT</th>
    <th>PRICE</th>
    <th>ADD TO CART</th>
  </tr>
  <tr>
    <td>Cherry</td>
    <td>6</td>
    <td><button class="item_button">+</button></td>
  </tr>
  <tr>
    <td>Peach</td>
    <td>8</td>
    <td><button class="item_button">+</button></td>
  </tr>
  <tr>
    <td>Strawberry</td>
    <td>12</td>
    <td><button class="item_button">+</button></td>
  </tr>
</table>
<h1>YOUR CHOICE</h1>
<table id="products_cart">
  <tr>
    <th>PRODUCT</th>
    <th>PRICE</th>
    <th>REMOVE FROM CART</th>
  </tr>
</table>

<script>
let basket = document.getElementById("products_cart")
let buttons = document.querySelectorAll('.item_button');

// 给初始的"+"按钮绑定添加事件
for (const button of buttons) {
  button.addEventListener('click', cloneLine);
}

function cloneLine(e) {
  let td = e.target.parentNode;
  let tr = td.parentNode;
  let clone = tr.cloneNode(true);
  
  // 找到克隆行里的按钮，修改文本为"-"
  const removeBtn = clone.querySelector('.item_button');
  removeBtn.textContent = "-";
  
  // 给"-"按钮绑定删除事件
  removeBtn.addEventListener('click', function() {
    // 移除当前按钮所在的行
    this.parentNode.parentNode.remove();
  });
  
  basket.appendChild(clone);
}
</script>

关键修改点说明 #

1. 修改按钮文本：克隆行之后，用clone.querySelector('.item_button')精准定位到克隆出来的按钮，直接修改textContent为-——你之前尝试失败大概率是没定位到克隆后的按钮，误修改了原按钮的内容。
2. 绑定删除事件：给新的-按钮单独绑定点击事件，点击时通过this.parentNode.parentNode找到当前所在行，再用remove()方法删除该行。
3. 优化购物车表格：给购物车表格加上表头，让界面逻辑更清晰（这是可选优化，你可以根据需求调整）。

这样修改后，点击初始表格的+按钮就能把商品加到购物车，按钮自动变成-，点击-就能删除对应商品啦！

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