如何用JavaScript定位无类名/ID的指定label元素并设置隐藏样式

没问题，这种场景咱们完全可以通过CSS选择器或者JavaScript来精准定位目标label并隐藏它，我给你整理几个实用的方案：

一、CSS 静态隐藏方案 #

如果只需要静态隐藏（页面加载后就固定隐藏），用CSS选择器就能轻松搞定：

1. 按元素顺序定位（:nth-of-type()） #

利用label在父元素.option-wrapper里的排列顺序来选择，比如：

• 隐藏第一个label：

.option-wrapper label:nth-of-type(1) {
  display: none;
}

• 隐藏第二个label就把1改成2，以此类推。这个方法简单直接，适合你明确知道目标label位置的情况。

2. 根据子元素input的value定位（:has()选择器） #

如果知道目标label里input的value值，用:has()选择器可以精准找到包含对应input的label：
比如要隐藏包含value="2"的input的label：

.option-wrapper label:has(input[value="2"]) {
  display: none;
}

注意：:has()是较新的CSS选择器，现代主流浏览器（Chrome、Firefox 121+、Safari 15.4+）都支持，要是需要兼容旧浏览器，建议用下面的JS方案。

二、JavaScript 动态控制方案 #

如果需要根据交互动态隐藏，或者要兼容旧浏览器，用JS会更灵活：

1. 按元素索引定位 #

先获取父元素下的所有label，再通过索引选择目标：

// 拿到父容器里的所有label
const allLabels = document.querySelector('.option-wrapper').querySelectorAll('label');
// 隐藏第一个label（索引从0开始，第二个就写allLabels[1]）
allLabels[0].style.display = 'none';

2. 根据input的value定位目标label #

通过input的value找到对应的label，这种方法不需要依赖元素顺序，结构变化也不容易失效：

// 先找到对应value的input，再获取它的父元素label
const targetInput = document.querySelector('.option-wrapper input[value="1"]');
if (targetInput) {
  // 用closest('label')比parentElement更稳妥，适配可能的结构调整
  targetInput.closest('label').style.display = 'none';
}

这样不管label有没有类名或ID，都能精准定位并隐藏啦～

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