javascript - 选择并设置所有具有特定子元素(跨度)的 div 的样式

Question

我需要选择 "display: none" 给所有具有 span 类 .span-target 的 articles 在其中。这里我给大家举个例子。

我尝试使用 remove = document.querySelectorAll(''); 但我只能选择它们并且不知道如何添加它们 display: none 或以某种方式删除它们。

请注意，jQuery 不是一个选项

提前谢谢你。

这里的例子:

<article class="class-1">
  <div class="class-2">
    <span class="class-3">Example 1</span>
    <div class="class-4 class-41 class-42">
      <div class="class-5 class-51 class-52">
        <div class="class-6 class-61 class-62 class-63">
          <div class="class-7 class-71 class-72 class-73">
            <div class="class-8 class-81 class-82 class-83">
              <span class="span-1">
                <time class="span-2">Sep 26</time>
                <span class="span-3"></span>
                <span class="span-4"></span>
                <span class="span-target">
                  Please leave
                  <span class="span-5">
                  </span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

Answer 1

您可以遍历所选元素并为其添加样式

Array.from(
  document.querySelectorAll('article')
).forEach(el => {
    let shouldHide = el.querySelectorAll('.span-target').length;
    if (shouldHide) {
        el.style.display = "none";
    }
});