Hiding element based on content I have a page that is part of a CMS and I cannot alter any existing HTML or CSS, but I can add additional custom JavaScript and CSS. There is some text on this page I want to hide and I found a solution but it feels kludgey. I can't be sure other pages won't have similar content on them, which is why I'm being so specific in my check.

This doesn't seem like an optimal way to do this, so I'm just curious how it could be improved.

The HTML:

&lt;div&gt;
&lt;h1&gt;Welcome!&lt;/h1&gt;
&lt;p class="hero-action"&gt;
The office is closed!&lt;/p&gt;
&lt;/div&gt;


And the JavaScript I'm using to hide just "The office is closed":

function removeWarning() {
  var els = document.getElementsByClassName("hero-action");
  var el = els[0]

  if (el.textContent.indexOf("office" &gt; -1) &amp;&amp; el.textContent.indexOf("is" &gt; -1) &amp;&amp; el.textContent.indexOf("closed" &gt; -1)) {
    el.style.display = "none";
   }
}

removeWarning();


Like I said, it works it just feels dumb. I know I could make an anonymous self calling function, but I'm more interested in how to improve the if check if there is a way.

Note: I'm not just checking for the entire string because the CMS is generating the &lt;p&gt;...&lt;/p&gt; block with some weird amount of whitespace and I was struggling to match spaces, newlines, etc.
if (el.textContent.indexOf("office is closed" &gt; -1)) {
    el.style.display = "none";
}


Does this help?

Or if you know that hero-action is talking about Office, as in you are confirmed, then you can simply check for the word close rather than checking the whole string.