购物车删除按钮功能失效求助：点击无控制台输出

问题分析 #

你的购物车REMOVE按钮点击无反应且控制台无输出，核心问题有两个：

• removeCartItem函数未定义：JS代码只为按钮绑定了点击事件，但没有实现对应的处理逻辑，点击后无代码可执行。
• HTML表格结构不规范：<tr>标签直接嵌套<div class="cart-row">，违反表格结构规则（<tr>的直接子元素必须是<td>/<th>），浏览器会自动修正DOM结构，可能导致后续DOM操作（比如查找购物车项行）失败。

修复步骤 #

1. 修正HTML表格结构 #

将cart-row类移到<tr>标签上，确保表格结构符合规范：

<table>
  <thead>
    <tr class="cart-row">
      <th><span class="cart-item cart-header cart-column">ITEM</span></th>
      <th><span class="cart-price cart-header cart-column">QUANTITY</span></th>
      <th><span class="cart-quantity cart-header cart-column">PRICE</span></th>
      <th></th>
    </tr>
  </thead>
  <tbody class="cart-items">
    <tr class="cart-row">
      <td class="product__cart__item">
        <div class="product__cart__item__pic">
          <img src="img/shop/cart/cart-1.jpg" width="100" height="100">
        </div>
        <div class="product__cart__item__text">
          <h6>T-shirt Contrast Pocket</h6>
        </div>
      </td>
      <td class="quantity__item">
        <div class="quantity">
          <div class="pro-qty">
            <input type="text" value="1">
          </div>
        </div>
      </td>
      <td class="cart__price">$ 30.00</td>
      <td>
        <button type="button" class="btn btn-danger">REMOVE</button>
      </td>
    </tr>
  </tbody>
</table>

2. 实现删除函数并优化事件绑定 #

补充删除逻辑，同时用事件委托兼容动态添加的购物车项：

if (document.readyState == "loading") {
  document.addEventListener("DOMContentLoaded", ready)
} else {
  ready()
}

function ready() {
  // 事件委托处理删除按钮点击，兼容动态添加的购物车项
  document.querySelector('.cart-items').addEventListener('click', function(e) {
    if (e.target.classList.contains('btn-danger')) {
      removeCartItem(e.target);
    }
  });

  var quantityInputs = document.getElementsByClassName("quantity__item")
  for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i]
    input.addEventListener("change", quantityChanged)
  }

  var addToCartButtons = document.getElementsByClassName("shop-item-button")
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener("click", addToCartClicked)
  }

  document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}

// 实现删除购物车项的核心逻辑
function removeCartItem(button) {
  // 找到当前按钮所在的购物车行并删除
  var cartRow = button.closest('.cart-row');
  cartRow.remove();
  // 若有总价更新逻辑，可在此调用对应函数，比如updateCartTotal()
  console.log("购物车项已删除");
}

// 补充其他未实现的业务函数（根据需求完善）
function quantityChanged(e) {
  // 数量变更处理逻辑
}

function addToCartClicked(e) {
  // 添加到购物车处理逻辑
}

function purchaseClicked(e) {
  // 结算处理逻辑
}

关键说明 #

• 事件委托：通过监听cart-items容器的点击事件，判断点击目标是否为删除按钮，这种方式无需为每个按钮单独绑定事件，还能兼容后续动态添加的购物车项。
• closest()方法：快速找到最近的目标父元素（支持IE11及以上），若需兼容更低版本，可改用parentNode逐层向上查找。

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