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

Question

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

它们都具有相同的shows-list__title类。 内容在A行（2015年电话投票） ， B行（2015年电话投票）和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代码，以便从DOM /网页中隐藏Vote 2015 Debates ， Vote 2015 Phone-in和Vote 2015 Special 。 我不想隐藏具有投票改革内容的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上添加特定的类，并添加CSS来隐藏该类以获得最佳性能。

感谢@ 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>