使用JavaScript隐藏标签下的Div

Question

如何使用 JavaScript（不是 jQuery）隐藏 div

paymentProviderHeader-cc

，但无需这些类的帮助，因为页面中的另一个部分具有我不想隐藏的相同 div/类。在这种情况下，我可以使用的唯一唯一选择器是标签中的属性 (

for="radio-paypalcommerce"

)。

我尝试过，但没有成功。

document.getElementsByClassName("label[for="radio-paypalcommerce"] > .paymentProviderHeader-cc")[0].style.visibility = "hidden";

<div class="form-field">
  <label for="radio-paypalcommerce" class="form-label optimizedCheckout-form-label">
    <div class="paymentProviderHeader-container">
      <div class="paymentProviderHeader-nameContainer" data-test="payment-method-paypalcommerce">
      </div>
      <div class="paymentProviderHeader-cc">
      </div>
    </div>
  </label>
</div>

Answer 1

您的代码有几个问题：

1.) 您正在调用

document.getElementsByClassName

，但您正在传递完整的 CSS 选择器。该方法只能被赋予一个类名，这就是它如此命名的原因。如果您想使用完整的 CSS 选择器，请使用

document.querySelector

或

document.querySelectorAll

代替

2.) 您的 CSS 选择器字符串在字符串内使用与引用字符串本身相同的引号。这就是您出现语法错误的原因。请参阅下面，我对整个字符串使用

'

单引号，然后将

"

保留在内部作为

for="..."

选择器。

'label[for="radio-paypalcommerce"] > .paymentProviderHeader-cc'

3.) 最后，您的选择器正在寻找

.paymentProviderHeader-cc

作为 label 的

直接子级

。它不是直接子元素，它位于

.paymentProviderHeader-container

元素内。因此，您可以删除

>

，以便它找到嵌套在任何级别的子级（这是我推荐的），或者您可以像这样添加额外的选择器

'label[for="radio-paypalcommerce"] > .paymentProviderHeader-container > .paymentProviderHeader-cc'

这是一个完整的工作示例

document.querySelectorAll('label[for="radio-paypalcommerce"] .paymentProviderHeader-cc')[0].style.visibility = "hidden";

<div class="form-field">
  <label for="radio-paypalcommerce" class="form-label optimizedCheckout-form-label">
    <div class="paymentProviderHeader-container">
      <div class="paymentProviderHeader-nameContainer" data-test="payment-method-paypalcommerce">
      </div>
      <div class="paymentProviderHeader-cc">
      </div>
    </div>
  </label>
</div>