CSS solution to make parent invisible when all children are invisible - html

Question

I'm looking to hide an element platform-group based on whether it has any visible job-btn children. If all the children are hidden, then I'd like to hide the parent.
So if I have HTML showing like this:
B R( C J ) HideMe( )
I would like it to show like this:
B R( C J )
A JS fiddle with this is here: http://jsfiddle.net/cheshirecam/wf60z08n/5/
The HTML:
<tr>
<span style="display: inline-block;" class="job-btn">B</span>
<span style="display: inline;" class="platform-group">R(
<span style="display: inline-block;" class="job-btn filter-shown">C</span>
<span style="display: inline-block;" class="job-btn filter-shown">J</span>
<span style="display: none;" class="job-btn">V</span>
</span>
<span style="display: inline;" class="platform-group">HideMe(
<span style="display: none;" class="job-btn">C</span>
<span style="display: none;" class="job-btn">J</span>
</span>
</tr>
CSS:
.platform-group::after {
content: ")";
}
B, C and J are different job codes. C and J are in the platform-group of R. The platform-group of "HideMe" has no visible jobs, so I'd like it to hide itself.
A job gets the filter-shown class added/removed and the display: none or inline-block depending on some complex filter parameters the user can set. When I do that check, I could add or remove anything from the element. Adding/removing a class seems slow, and data values seem slow, too. Is there something better to tag the element with that the parent can detect somehow? Something that works kind of like this seems so close: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
I have this working using jQuery to check if the parent has 0 descendents jobs with the .filter-shown class and then hiding it.
The trick is, I'm doing this thousands of times on the page (it's a test-result dashboard of extra-ordinary magnitude) I would like a CSS only (or at least mostly) solution. The problem is it's kind of slow when turning filtering on and off. Profiling shows that adding/removing the filter-shown class is fairly expensive for each job.
I'm not above rearranging the HTML to make this work, as long as it looks roughly the same visually. Any thoughts or ideas on good directions to try are most appreciated.

Answer 1

Rather than adding classes suppose, in the Javascript/jQuery, you add the child spans you want shown by setting the innerHTML of the parent? Then, if there were no spans added, the parent element would be truly empty, and you could then use :empty, as in:-
platform-group:empty {
display : none;
}