How to remove empty elements after class?(jQuery)

Question

I have a series of elements after a certain class that are empty or having a white space inside it.

<div class="post-content">
     <div class="slider-1-smart">
     --- contents of the slider ---
     </div>

     <div></div>
     <div>   </div>

     <ul>
         <li>Text 1</li>
         <li>Text 2</li>
         <li>Text 3</li>
     </ul>  
</div>

This is the code that i tried so far:

$(function() {
    $('.post-content > div:empty').each(function() {

        j(this).remove();

    });
});

The result of that code is that the slider container also dissappears. What is the way to select elements after class="slider-1-smart" and remove it

Please let me know, THanks

Answer 1

The :empty psuedo-class only selects elements that are completely empty. In other words, if it has whitespace, it's technically not considered empty.

You could select all the following sibling div elements with .nextAll() and then filter them based on whether the trimmed HTML is equal to an empty string:

Example Here

$('.post-content > .slider-1-smart').nextAll('div').filter(function() {
  return $.trim($(this).html()) === '';
}).remove();