如何用JavaScript访问所有移除按钮？解决getElementById仅返回单元素问题

HTML 规范要求页面内 id 属性值必须全局唯一，你给两个移除按钮设置了相同的 id="remove_btn" 本身就不符合规范。而 document.getElementById() 的设计逻辑就是仅返回匹配对应 id 的第一个 DOM 元素，自然无法获取到全部按钮。

同类批量元素不要用 id 做选择标识，统一用 class 匹配即可，你的按钮上本身就已经有 remove_item_button 这个专属类名，直接用它选元素就行。

1. 先修正HTML，删掉重复的id属性（重复id本身就是无效写法）：

<div class="grocery_list_items">
    <div class="grocery_items">
        <div class="count">1.</div>
        <div class="item_name">Short Wears</div>
        <div class="remove_item_button">Remove</div>
    </div>
    <div class="grocery_items">
        <div class="count">2.</div>
        <div class="item_name">Short Wears</div>
        <div class="remove_item_button">Remove</div>
    </div>
</div>

2. 替换JS选择逻辑，用类选择器获取所有按钮，再遍历操作：

// 获取所有移除按钮，返回可遍历的DOM节点集合
const removeButtons = document.querySelectorAll('.remove_item_button');

// 验证：打印集合长度，会输出2，代表拿到了两个按钮
console.log('按钮总数：', removeButtons.length);

// 给每个按钮绑定事件/做单独操作
removeButtons.forEach((btn, index) => {
    console.log(`第${index + 1}个移除按钮：`, btn);
    btn.addEventListener('click', function() {
        // 示例：点击按钮时删除对应的整行条目
        this.closest('.grocery_items').remove();
    })
})

• 如果你坚持想用id选中元素，必须给每个按钮设置互不重复的id，比如remove_btn_1、remove_btn_2，但这种写法冗余度极高，批量场景完全不推荐
• getElementsByClassName('remove_item_button')也可以实现相同的选择效果，区别是它返回的是动态更新的HTMLCollection，querySelectorAll返回的是静态NodeList，日常使用优先选querySelectorAll即可，不容易出现预期外的问题。

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