How to remove empty elements after class?(jQuery)

2 Views

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:

Read More
$(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

Post Views: 2

Related posts

2 comments

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

  2. If you don’t want to check the slider element contents, all you need to do is make one modification to your code. Add .not("slider-1-smart") to the selector chain.

    $(function() {
    $('.post-content > div:empty').not(".slider-1-smart").each(function() {

        $(this).remove();

    });
});

Comments are closed.