Using vanilla javascript to hide a tag that contains certain text

Question

I have this code that hides a div that only contains a specific word, I've been trying (with no luck) to hide any div that contains this word, but also contains more text.

Any help will be appreciated, thanks!

 let divs = document.getElementsByClassName('test'); for (let x = 0; x < divs.length; x++) { let div = divs[x]; let content = div.innerHTML.trim(); if (content == 'example') { div.style.display = 'none'; } } 

 <div class="test"> ipsum </div> <div class="test"> example </div> <div class="test"> example complete </div> 

Answer 1

You could use JavaScript's string.includes() .

A hacky way to only remove the div containing more then only "examaple" is to have "example " in the includes() . This will only remove the div if the innerHTML has a space after "example"

 let divs = document.getElementsByClassName('test'); for (let x = 0; x < divs.length; x++) { let div = divs[x]; let content = div.innerHTML.trim(); if (content.includes('example')) { div.style.display = 'none'; } } 

 <div class="test"> ipsum </div> <div class="test"> example </div> <div class="test"> example complete </div> 

Answer 2

Something modern…

 document.querySelectorAll('.test').forEach((element, index) => { if (element.innerText.includes('example')) { element.style.display = 'none'; } }) 

 <div class="test">ipsum</div> <div class="test">example</div> <div class="test">example complete</div> 

Docs: NodeList.prototype.forEach() String.prototype.includes()

Answer 3

If you want to remove the div that contains the search word (checked with includes ) but that also has other characters in it perhaps store the word in a variable and check to see if the text is longer than that.

 let divs = document.getElementsByClassName('test'); const word = 'example'; for (let x = 0; x < divs.length; x++) { let div = divs[x]; let content = div.innerHTML.trim(); if (content.includes(word) & content.length > word.length) { div.style.display = 'none'; } } 

 <div class="test"> ipsum </div> <div class="test"> example </div> <div class="test"> example complete </div> 

Here's a modernised version of that code.

 let divs = document.querySelectorAll('.test'); const word = 'example'; divs.forEach(div => { const { style, textContent } = div; const trimmed = textContent.trim(); if (trimmed.includes(word) && trimmed.length > word.length) { style.display = 'none'; } }); 

 <div class="test"> ipsum </div> <div class="test"> example </div> <div class="test"> example complete </div> 

Answer 4

When you do div.innerHTML.trim() , it takes the entirety of the div element.

https://jsfiddle.net/ucvteLq7/7/

Try to search around regular expressions, and I think, you shouldn't hide a div according its class, but you must replace what it contains. Sorry that I can't help more.