如何隐藏页面多表单中指定的重复ID按钮？

页面中存在多个id为addtocart的按钮时，document.getElementById()只会返回DOM中第一个匹配的元素，要精准定位指定表单内的按钮，你可以通过以下几种方式实现：

方法1：通过目标表单定位内部按钮 #

先获取唯一的目标表单元素，再在其范围内查找按钮，这是最稳妥的方式：

// 获取id为form3的目标表单
const targetForm = document.getElementById('form3');
// 在表单内找到id为addtocart的按钮
const addToCartBtn = targetForm.querySelector('#addtocart');
// 隐藏按钮
addToCartBtn.style.visibility = 'hidden';

你也可以通过按钮的name属性查找（所有按钮name均为addtocart）：

const targetForm = document.getElementById('form3');
const addToCartBtn = targetForm.getElementsByName('addtocart')[0];
addToCartBtn.style.visibility = 'hidden';

方法2：直接使用复合CSS选择器 #

利用表单的唯一id和按钮的选择器组合，一步选中目标按钮：

document.querySelector('#form3 #addtocart').style.visibility = 'hidden';

这种方式会在#form3的子元素范围内查找第一个id为addtocart的元素，能精准定位到目标表单内的按钮。

方法3：遍历表单匹配目标（适用于未知表单id的场景） #

如果不清楚目标表单的id，可通过遍历所有表单，结合表单的其他特征（如name、内部内容）筛选出目标，再操作按钮：

document.querySelectorAll('form').forEach(form => {
  // 这里可替换为你的筛选条件，比如判断表单name或内部内容
  if (form.id === 'form3') {
    const btn = form.querySelector('#addtocart');
    btn.style.visibility = 'hidden';
  }
});

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