Vanilla JS hide Div if contains a string

Question

I'm dealing with a CMS that sometimes returns error codes when displaying products.

I'm currently learning basic JS, searched all over stack overflow, and couldn't find an answer applicable.

On this page

In the products used section, there is an error code for "#ResourceNotFound: ProjectResources, inside# New Construction : No" that keeps appearing for every product.

Is there an easy way that javascript can be used to hide these snippets from the front end?

The codes I used to try was

document.querySelectorAll('.text-medium').forEach((element, index) => {
   if (element.innerText.includes('New Construction :  No')) {
       element.style.display = 'none';
   }
})

Answer 1

You need to check for the presence of either of those phrases, as they are in separate <div> elements. Also, use textContent instead of innerText .

document.querySelectorAll('.text-medium').forEach((element, index) => {
   if (element.textContent.includes('New Construction :  No')
    || element.textContent.includes('#ResourceNotFound: ProjectResources')) {
       element.style.display = 'none';
   }
})