Question

152

Hide div that contains specific text

rated 0 times [ 154] [ 2] / answers: 1 / hits: 31200 / 7 Years ago, tue, october 17, 2017, 12:00:00

I want to hide a div based on the text inside. In the example below I want to hide the ones with Handtekening and the one with Thuis. I prefer to do that with CSS. Is that possible?

The class names of the divs have to be the same...

<div class=test>

     Pakket

</div>

<div class=test>

     Handtekening

</div>

<div class=test>

     Thuis

</div>

If not possible with CSS, how can it be done with JavaScript?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kiarra

Add To Favorites

Follow

Total Points: 202

Total Questions: 111

Total Answers: 109

Location: Sudan

Member since Mon, May 31, 2021

3 Years ago

answered 7 Years ago myakylas · Accepted Answer

Here's an easy vanilla Javascript solution:

const divs = document.getElementsByClassName('test');



for (let x = 0; x < divs.length; x++) {

    const div = divs[x];

    const content = div.textContent.trim();

  

    if (content == 'Handtekening' || content == 'Thuis') {

        div.style.display = 'none';

    }

}

Working JSFiddle here

Remember to include the script at the end of your HTML page (right before the </body> tag).