Hide a class if it contains a certain text

Question

HTML:

<div class="spanLabel"><span class="boldLabel">END DATE: </span>end date is empty</div>

JS:

$('.spanLabel').filter(function() {
    return !!($.trim( $(this).text() ) == 'end date is empty');
        }).hide();

I want to hide the whole spanLabel div if the word end date is empty is present.

Right now, code only works if I get rid of <span class="boldLabel">END DATE: </span>

Any ideas?

Possible duplicate of https://stackoverflow.com/questions/46790860/hide-div-that-contains-specific-text — Ravi Singh, Jan 09 '20 at 11:29
I'm not 100% clear on what you want to achieve. Are you saying that you want to hide the parent `div` if the `span` contains the specified text? — Martin, Jan 09 '20 at 11:32

score 2 · Answer 1 · answered Jan 09 '20 at 11:35

The sentence end date is empty belongs to div, not to span, from your html. Therefore you can use :contains to check if the div text has your desired text

$('.spanLabel:contains(" end date is empty")').hide()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="spanLabel">
  <span class="boldLabel">END DATE: </span> end date is empty
</div>

<div class="spanLabel">
  <span class="boldLabel">END DATE: </span> end date is not empty
</div>

Hide a class if it contains a certain text

1 Answers1