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