How do I hide a parent div when child div contains a certain text?

Question

Here's a fiddle of my problem.

I am trying to hide an entire div when a certain text is present. How do I do this with Javascript or Jquery?

I have already tried the ff:

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

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

But it only hides the div if it's the first one. I have multiple divs like the one on my fiddle.

Can anyone help, please?

Answer 1

includes does not work in IE. you can use.

 <script>

$(document).ready(function() {
//It will hide the parent which child contain only Closed not Closed Case
$(".col-md-1").filter(function() {
    return $(this).text() === "Closed";
}).parent().hide();


});

</script>

Div elements:

<div class="row word-style table-border">
  <div class="col-md-1">Tech assistance Internal Request</div>
  <div class="col-md-1">Closed Case</div>
  <div class="col-md-1">Normal</div>
  <div class="col-md-1">New</div>
</div>

<div class="row word-style table-border">
  <div class="col-md-1">Tech assistance</div>
  <div class="col-md-1">Closed</div>
  <div class="col-md-1">Normal</div>
  <div class="col-md-1">New</div>
</div>

Answer 2

With jQuery it's easy, just use the parent selector:

$('.col-md-1').each(function () {
  if ($(this).text().includes('Tech assistance')) {
    $(this).parent().hide();
  }
})

Answer 3

Use loop and check for string exist or not using indexOf like below.

 $('.table-border div').each(function(index, element) { if ($(this).text().indexOf("Internal Request") >= 0) { $(this).parent().hide(); } }); 

 .table-border { border-bottom: 1px solid #c9cacc; padding-bottom: 20px; padding-top: 20px; height: 73px; } .word-style { font-family: Roboto-Light; font-size: 15px; color: #6d6e71; letter-spacing: 0.5px; line-height: 15px; text-align: center; } .col-md-1 { width: 8.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } div { width: 1200px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row word-style table-border"> <div class="col-md-1">Tech assistance Internal Request</div> <div class="col-md-1">PARTS </div> <div class="col-md-1">Normal</div> <div class="col-md-1">New</div> </div> <div class="row word-style table-border"> <div class="col-md-1">Tech assistance</div> <div class="col-md-1">IOT </div> <div class="col-md-1">Normal</div> <div class="col-md-1">New</div> </div>