Hiding div if string contains specific text-CodePudding

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  style="color:#000000;margin-bottom:5px;">
  <p><strong>Twitter :</strong></p>
</div>
<div  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!

CodePudding user response：

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

CodePudding user response：

I'm assuming .fusion-text-9 could be anywhere otherwise you could just use prev(), closest() or similar. How about using a callback in the hide method so that it only occurs if #twitter-handle is hidden?

Example

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

CodePudding user response：

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

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

<div  style="color:#000000;margin-bottom:5px;">
  <p><strong>Twitter :</strong></p>
</div>
<div  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>

CodePudding user response：

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 >
  <div  style="color:#000000;margin-bottom:5px;">
    <p><strong>Twitter :</strong></p>
  </div>
  <div  style="margin-right:60px;" id="twitter-handle">
    <p>Containing None</p>
    <p>Not containing</p>
    <p>Not containing</p>
  </div>
</div>

<div  >
  <div  style="color:#000000;margin-bottom:5px;">
    <p><strong>Facebook (and so on..) :</strong></p>
  </div>
  <div  style="margin-right:60px;" id="twitter-handle">
    <p>Containing None</p>
    <p>Not containing</p>
    <p>Not containing</p>
  </div>
</div>

CodePudding user response：

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

CodePudding user response：

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  style="color:#000000;margin-bottom:5px;">
  <p><strong>Twitter :</strong></p>
</div>
<div  style="margin-right:60px;" id="twitter-handle">
  <p>None</p>
</div>

further reading

More here about match() and textContent()