Is there a way to hide the title div if related divs are not present in the HTML structure?
This is the main HTML structure:
<div class="row parent">
<div id="title-1" class='col-12 prov-title'>
<h2>$category->name</h2>
</div>
<article id="child-11" class="col-md-6 mb-4 child">
... Content ...
</article>
<div id="title-2" class='col-12 prov-title'>
<h2>$category->name</h2>
</div>
<article id="child-21" class="col-md-6 mb-4 child">
... Content ...
</article>
<article id="child-22" class="col-md-6 mb-4 child">
... Content ...
</article>
</div>
After filtering the content:
<div class="row parent">
<div id="title-1" class='col-12 prov-title'>
<h2>$category->name</h2>
</div>
<article id="child-11" class="col-md-6 mb-4 child">
... Content ...
</article>
<article id="child-12" class="col-md-6 mb-4 child">
... Content ...
</article>
<div id="title-2" class='col-12 prov-title'>
<h2>$category->name</h2>
</div>
</div>
If the #child-21 and #child-22 layers are not shown, I want to hide the #title-2 div.
One possible solution I thought of is to create a loop to look for .child pages by ID that start with the same number as the corresponding title div and hide it. However, I'm not sure about how to use wildcards in the references to the id...
Any suggestions on the best way to achieve this using javascript?
Thank you,