How to hide html tag content in JavaScript?

Question

I have a DOM as shown below in which I want to hide specific h2 tag contents.

All of them have the same class shows-list__title. The contents are at Line A (Vote 2015 Phone-in), Line B(Vote 2015 Phone-in) and Line C (Vote 2015 Special).

<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>

Problem Statement:

I am wondering what JS code I need to add so that it hides Vote 2015 Debates , Vote 2015 Phone-in and Vote 2015 Special from the DOM/webpage. I don't want to hide that h2 tag which has content Voting Reform.

Try this: var elementList = document.querySelectorAll("h2"); elementList.forEach((element) => {element.style = "display: none;";}); — Peter Warrington
– Peter Warrington, Commented Aug 14, 2019 at 17:51
Use querySelectorAll to fetch all the clalss name with shows-list__title. And iterate the returned node list with either css or html hidden attribute — choz
– choz, Commented Aug 14, 2019 at 17:51
@ Peter Warrington but in the dom there are many h2 tags. I want to hide the h2 tags which have the content Vote 2015 Debates, Vote 2015 Phone-in and Vote 2015 Special. — flash
– flash, Commented Aug 14, 2019 at 17:53

Aziz.G · Accepted Answer · 2019-08-14 18:07:54Z

3

you can forEach elements and add hidden for visibility css attribute

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>

edited Aug 14, 2019 at 18:07

answered Aug 14, 2019 at 17:54

Aziz.G

3,7913 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

flash Over a year ago

I have modified my question in order to give more information.

flash Over a year ago

I don't want to hide that h2 tag which has content Voting Reform.

Aziz.G Over a year ago

that's better for you having an array for words that you want to hide :) better than a long condition with multiple ||

flash Over a year ago

I have posted one more question a day ago but I haven't received much attention. I am wondering if you can have a look. Just wondering if the solution is possible via Javascript ?

Barkermn01 · Accepted Answer · 2019-08-14 18:21:44Z

3

So you are looking for these exact textual matches that can be done like so

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;":""));

Please note this is a quick and dirty JS only hacky way of doing this, I would say you should add a specific class on them in HTML and add CSS that hides that class for the best performance.

With thanks to @G.Aziz for the improvement of using an array

Oh hell, I got thinking about it and here is a completely unreadable golfed version saving your bandwidth a whopping 46 bytes per page request!!! Don't use this it's just for fun to show how small you could make this if you had your example as Vote 2016 this would hide them aswell.

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;":""));

edited Aug 14, 2019 at 18:21

answered Aug 14, 2019 at 17:53

Barkermn01

6,86038 silver badges87 bronze badges

6 Comments

flash Over a year ago

In the dom there are many h2 tags. I want to hide the h2 tags which have the content Vote 2015 Debates, Vote 2015 Phone-in and Vote 2015 Special.

flash Over a year ago

I don't want to hide that h2 tag which content Voting Reform.

Barkermn01 Over a year ago

Updated for you

Aziz.G Over a year ago

check mine and update yours with an array of words to hide :)

Barkermn01 Over a year ago

@G.aziz thanks, done that it's like were golfing this away :D

|

Collectives™ on Stack Overflow

How to hide html tag content in JavaScript?

2 Answers 2

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related