Hiding div if string contains specific text

Question

I'm trying to hide 2 separate divs based on the contents of the second one (ie, if the P contains the word "None").

<div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;">
  <p><strong>Twitter :</strong></p>
</div>
<div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle">
  <p>None</p>
</div>

I'm able to hide the div with the ID of twitter-handle by using the following:

$(document).ready(function () {
   $("#twitter-handle p:contains('None')").parent('div').hide();
});

However, I can't seem to figure out how to also hide the first div, with the class "fusion-text-9" (it's unique on the page).

Any guidance would be appreciated!

Answer 1

If you want a vanilla JS solution instead of using jQuery you can use the match() method on the element's text content:

 let fusionText = document.querySelectorAll(".fusion-text"); fusionText.forEach(element => { if (element.textContent.match(/None/)) { fusionText.forEach(element => { element.style.display = "none"; }) } });

 <div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;"> <p><strong>Twitter:</strong></p> </div> <div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle"> <p>None</p> </div>

further reading

More here about match() and textContent()

Answer 2

to also hide the first div, with the class "fusion-text-9"...

 $(document).ready(function () { $("#twitter-handle p:contains('None')").parent().parent().hide(); });

 <div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;"> <p><strong>Twitter:</strong></p> </div> <div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle"> <p>None</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> </div>

Answer 3

The prev method should be what your looking for...

$(document).ready(function () {
    var $found = $("#twitter-handle p:contains('None')").parent('div');
    $found.hide();
    $found.prev().hide();
});

You can also pass a selector to the prev method...

$(document).ready(function () {
    var $found = $("#twitter-handle p:contains('None')").parent('div');
    $found.hide();
    $found.prev('.fusion-text-9').hide();
});

Answer 4

Just a demo to show how to deal with the found elements and addressing the parent before hiding it (according to the selector criteria):

 $(document).ready(function () { const psToHide = $("#twitter-handle p:contains('None')"); psToHide.each((i, o)=>{ $(o).closest('div').hide(); }); });

 .extraDivForTheSakeOfBorderAndShowingScaling{ border: solid red 1px; margin-bottom: 1rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="extraDivForTheSakeOfBorderAndShowingScaling"> <div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;"> <p><strong>Twitter:</strong></p> </div> <div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle"> <p>Containing None</p> <p>Not containing</p> <p>Not containing</p> </div> </div> <div class="extraDivForTheSakeOfBorderAndShowingScaling"> <div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;"> <p><strong>Facebook (and so on..):</strong></p> </div> <div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle"> <p>Containing None</p> <p>Not containing</p> <p>Not containing</p> </div> </div>

Answer 5

To make both of them disappear you need to find a common ground.

If your neighbour-div you want to hide allways is next to the div, that contains 'None', then you can simply extend your jQuery by:

$(document).ready(function () {
 $("#twitter-handle p:contains('None')").parent('div').hide();
 $("#twitter-handle p:contains('None')").parent('div').previousElementSibling.hide();
});

If the other component ist further away inside another div on the other side of the dom-tree, id suggest to give them both the same styleclass. Your code could then look something like that:

$(document).ready(function () {
 let nonePTag = $("#twitter-handle p:contains('None')")
 nonePTag.parent('div').hide();
 $(nonePTag.classList[0]+" p:not(:contains('None'))")
});
NOTE: The common class has to be in the index (in my exsample the first) position of all classes.

I hope i could help you