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

Question

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

他们都有相同的classshows-list__title。内容在 A 行（投票 2015 Phone-in），B 行（投票 2015 Phone-in） 和 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 和 从 DOM/webpage 投票 2015 年特别。我不想隐藏内容为 投票改革 的 h2 标签。

Answer 1

所以你正在寻找这些可以像这样完成的精确文本匹配

let toHide = ["Vote 2015 Debates", "Vote 2015 Phone-in", "Vote 2015 Special"];
document.querySelectorAll("h2.shows-list__title").forEach(elm => elm.setAttribute("style",toHide.includes(elm.innerText)?"display:none;":""));

请注意，这是一种快速而肮脏的 JS 唯一 hacky 方法，我会说你应该在 HTML 中添加一个特定的 class 并添加 CSS隐藏 class 以获得最佳性能。

感谢@G.Aziz 对数组使用的改进

哦见鬼，我开始考虑了，这是一个完全不可读的高尔夫版本，每页请求可节省高达 46 字节的带宽！！！不要使用它只是为了好玩，如果你有你的例子，你可以把它做得多小 Vote 2016 这也会隐藏它们。

let h=["Debates", "Phone-in", "Special"];document.querySelectorAll("h2.shows-list__title").forEach(e=> e.setAttribute("style",h.includes(e.innerText.split(' ')[2])?"display:none;":""));

Answer 2

您可以 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>

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

How to hide html tag content in JavaScript?

html

javascript

dom

hide