How to hide a parent div if children contains a certain text/string?

Question

Here's my code:

 <div class="row word-style table-border">
 <a href="#" target="_blank">
 <div class="col-md-1 underlined">00184799</div>
        </a>

    <div class="col-md-1">  
        Salesforce Case 
    </div>

    <div class="col-md-3">
     Machine Down 
    </div>


    <div class="col-md-1">
        Machine Down
    </div>

    <div class="col-md-1">
        Internal Request
    </div>

</div>

I want to hide the whole entire div if ever the text Internal Request is present.

Answer 1

You need to use the DOM API for this,

$containers = document.querySelectorAll("div.row.word-style.table-border");

for($container of $containers) {
  if ($container.innerText.includes('Internal Request')) {
    $container.style.display = "none" ;
  }
}

check this link

Answer 2

Below code should work for you:

$('.row .col-md-1').each(function(index,col){
    if($(col).text() == 'Internal Request'){
       $(col).hide();
    }
})

Answer 3

Many ways to peel this apple. Here's one:

 var row=document.querySelector(".row"); var children = row.childNodes children.forEach(c=>{ if(c.innerHTML&&c.innerHTML.indexOf("Internal Request") !== -1) { row.className+=" hidden" } }); 

 .hidden{ display: none; } 

  <div class="row word-style table-border"> <a href="#" target="_blank"> <div class="col-md-1 underlined">00184799</div> </a> <div class="col-md-1"> Salesforce Case </div> <div class="col-md-3"> Machine Down </div> <div class="col-md-1"> Machine Down </div> <div class="col-md-1"> Internal Request </div> </div>