javascript - 如何在JavaScript中隐藏html标签内容？

Question

我有一个如下所示的 DOM，我想在其中隐藏特定的 h2 标签内容。

它们都具有相同的类 shows-list__title。内容在 A 行(投票 2015 年电话 session )、B 行(投票 2015 年电话 session ) 和 C 行(2015 年特别投票)。

<li class="shows-list__letter">
    <h1 class="shows-list__letter-title">V</h1>
    <a class="shows-list__link" href="http://sandbox.cpac.ca/en/programs/vote-2015-debates/">
        <h2 class="shows-list__title">Vote 2015 Debates</h2> <!-- Line A -->
    </a>
</li>
<li class="shows-list__letter">
    <a class="shows-list__link" href="http://sandbox.cpac.ca/en/programs/vote-2015-phone-in/">
        <h2 class="shows-list__title">Vote 2015 Phone-in</h2> <!-- Line B -->
    </a>
</li>
<li class="shows-list__letter">
    <a class="shows-list__link" href="http://sandbox.cpac.ca/en/programs/vote-2015-special/">
        <h2 class="shows-list__title">Vote 2015 Special</h2> <!-- Line C -->
    </a>
</li>
<li class="shows-list__letter">
    <a class="shows-list__link" href="http://sandbox.cpac.ca/en/programs/voting-reform/">
        <h2 class="shows-list__title">Voting Reform</h2>
    </a>
</li>

问题陈述:

我想知道我需要添加什么 JS 代码，以便它隐藏 Vote 2015 Debates、Vote 2015 Phone-in 和 Vote 2015 Special 来自 DOM/网页。我不想隐藏内容为 Voting Reform 的 h2 标签。

Answer 1

您可以forEach 元素并添加隐藏可见性css 属性

var el = document.querySelectorAll("h2.shows-list__title")


const ext = ["Vote 2015 Debates", "Vote 2015 Phone-in", "Vote 2015 Special"];

el.forEach(el =>
  ext.includes(el.innerText) &&
  el.setAttribute("style", "visibility: hidden;")
)

<li class="shows-list__letter">
  <h1 class="shows-list__letter-title">V</h1>
  <a class="shows-list__link" href="http://sandbox.cpac.ca/en/programs/vote-2015-debates/">
    <h2 class="shows-list__title">Vote 2015 Debates</h2>
    <!-- Line A -->
  </a>
</li>
<li class="shows-list__letter">
  <a class="shows-list__link" href="http://sandbox.cpac.ca/en/programs/vote-2015-phone-in/">
    <h2 class="shows-list__title">Vote 2015 Phone-in</h2>
    <!-- Line B -->
  </a>
</li>
<li class="shows-list__letter">
  <a class="shows-list__link" href="http://sandbox.cpac.ca/en/programs/vote-2015-special/">
    <h2 class="shows-list__title">Vote 2015 Special</h2>
    <!-- Line C -->
  </a>
</li>
<li class="shows-list__letter">
  <a class="shows-list__link" href="http://sandbox.cpac.ca/en/programs/vote-2015-special/">
    <h2 class="shows-list__title">Voting Reform</h2>
    <!-- Line D -->
  </a>
</li>