Hide HTML element depending on page text [closed]

I want to hide a div with javascript but only on the condition that certain text appears in a separate element within the DOM.

For example if the word ‘arthritis or Testosterone’ appears in the h1 element on the page (below) THEN hide element ‘x’ otherwise keep it visible.

<h1>Arthritis</h1>

<div class="x">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>

Answer

Since is a H1 title, I presume that appears only one time, right? So, try this:

$(document).ready(function(){
  if ( $("#the_title:contains(arthritis)") || $("#the_title:contains(testosterone)") ) {
    $(".x").css("background-color", "yellow");
      //$(".x").hide(); uncomment this to hide the element
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="the_title">Arthritis</h1>

<div class="x">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *