how to hide on item in a class if the following element is empty

Question

I have HTML as follows and want to hide the item with the class roles if the following div is empty.

<b class="roles">heading 1</b>
<div>...</div>

<b class="roles">heading 2</b>
<div></div>

In this instance the first heading should show though the second would be hidden. The jQuery I have tried is as follows:

$(document).ready(function(){
    $('.roles').next().is(':empty').addClass('hidden');
});

Here is my CSS regarding the hidden class:

.hidden {
    display: none;
}

Thank you for your help!

Answer 1

For multiple .roles you've to loop over each of the element and check the condition for each element.

$('.roles').each(function() {
    if ($(this).next().is(':empty')) {
        $(this).addClass('hidden');
    }
});