CODEWITHSUNDEEP
javascripthtmljquerycss
MacGyver_97
MacGyver_97

Reputation: 229

Hiding div if string contains specific text

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!

Upvotes: 0

Views: 1638

Answers (5)

paulo77
paulo77

Reputation: 174

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()

Upvotes: 3

Patric Ziel
Patric Ziel

Reputation: 71

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

Upvotes: 1

Diego D
Diego D

Reputation: 8153

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>

Upvotes: 1

Yash porwal
Yash porwal

Reputation: 326

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>

Upvotes: 2

Levi Cole
Levi Cole

Reputation: 3684

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();
});

Upvotes: 1

Related Questions