存在对应类元素但getElementsByClassName返回undefined的购物车问题求助

问题根源 #

你的代码失效核心原因是HTML结构不合法：在<table>标签内直接嵌套了<div class="cart-items">和<div class="cart-row">，这违反了HTML表格的规范——表格的直接子元素只能是<thead>、<tbody>、<tr>等表格专用元素。浏览器会自动修正这种错误，把违规的<div>标签移出表格，导致你的JS代码中，cart-row容器和它本该包含的<tr>、cart-price、cart-amt元素完全不在同一个DOM层级，自然无法通过getElementsByClassName获取到目标元素。

解决方案（保留table结构） #

修正HTML结构，将类名绑定到表格的合法元素上，同时优化JS逻辑增强健壮性：

1. 修正后的表格HTML代码

<table style='width: 100%'>
  <!-- 显式添加thead存放表头 -->
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Subtotal</th>
    </tr>
  </thead>
  <!-- 把cart-items类绑定到tbody上，作为购物车项的容器 -->
  <tbody class="cart-items">
    <!-- 把cart-row类直接绑定到tr上，每个行就是一个购物车项 -->
    <tr class="cart-row">
      <td><span class="cart-name">Iphone 14 Max Pro, £899.99 </span><button class="btn btn-danger" type="button">Remove</button></td>
      <td><input class="cart-amt" type="number" value="1"></td>
      <td><span class="cart-price">£899.99</span></td>
    </tr>
  </tbody>
</table><br>

2. 优化后的JS代码

// 用DOMContentLoaded确保DOM解析完成后再执行脚本，避免async导致的元素获取失败
document.addEventListener('DOMContentLoaded', function() {
  var removeCartItemButtons = document.getElementsByClassName('btn-danger')
  console.log(removeCartItemButtons)

  for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    button.addEventListener('click', function (event) {
      // 用closest方法替代多层parentElement，更健壮
      var buttonClicked = event.target
      buttonClicked.closest('.cart-row').remove()
      updateCartTotal()
    })
  }
})

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('cart-items')[0]
  var cartRows = cartItemContainer.getElementsByClassName('cart-row')

  for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i]
    var priceElement = cartRow.getElementsByClassName('cart-price')[0]
    var quantityElement = cartRow.getElementsByClassName('cart-amt')[0]
    console.log(priceElement, quantityElement) // 现在能正常输出目标元素
  }
}

额外说明 #

• 移除了原script标签的async属性，改用DOMContentLoaded事件确保脚本在DOM完全解析后执行，避免页面未加载完成时获取不到元素的问题。
• 用closest('.cart-row')替代parentElement.parentElement，即使按钮的嵌套结构发生变化，也能准确找到对应的购物车行，提升代码健壮性。

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