hide a div if empty with jquery

Question

This block of code belongs to a joomla module that posts articles.The problem is that inside this div

<div class="ns2-row <?php echo $j==0 ? 'ns2-first' : '' ?> <?php echo $j%2 ? 'ns2-even' : 'ns2-odd' ?>">

Its getting posted the article and 4 more divs that are completly empty. Theese divs are getting padding + border from css. ( they use the same class as the article so i cant just display:none em ).I dont like the output and i would like to remove any div that is empty.My first touch with jquery was today and after some searching i reached to the below code that dont seem to work. I pasted only the block of code i want to edit.

<div class="ns2-page <?php echo $anim_class; ?>">
  <div class="ns2-page-inner">
  <?php for($j=0;$j<$article_row;$j++, $i++): ?>
    <div class="ns2-row <?php echo $j==0 ? 'ns2-first' : '' ?> <?php echo $j%2 ? 'ns2-even' : 'ns2-odd' ?>">
        <div class="ns2-row-inner">
        <script>
        $('div').filter(function () {
        return $.trim($(this).html()).length == 0;
        }).hide();
        </script>

i tried it and as return $.trim($(this).text()) === ''; but also nothing happened ? i do something wrong ?

Cannot you check instead if article (or whatever DIV) is empty server side and then not generate it? This is how to should be done but i don't know much drupal. Maybe i completly misunderstand your issue — A. Wolff
– A. Wolff, Commented Nov 19, 2014 at 12:58

Jai · Accepted Answer · 2014-11-19 12:57:54Z

1

Can't you just do this:

$('div:empty').hide();

@ jQuery docs for `:empty` selector-

Select all elements that have no children (including text nodes).

answered Nov 19, 2014 at 12:57

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

IseNgaRt Over a year ago

that empty divs i wanna get rid of , have another 1 empty div inside them ! so if im not mistaken this would be a children for the parent div and the above code wouldnt work, right?

Jai Over a year ago

$('div') is the selector which always returns a collection, so in your case wherever it finds empty div will be get hidden.

Balachandran · Accepted Answer · 2014-11-19 12:54:26Z

0

try

$('div').each(function(){
  if(!$(this).children().length){
   $(this).hide();
  }

});

or

 $('div').filter(function(){
    $(this).children().length==0;
 }).hide();

answered Nov 19, 2014 at 12:54

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

1 Comment

IseNgaRt Over a year ago

it doesnt work also :( maybe i dont put the code in the right block ? for me seems kinda right ,because every time the for loops gonna create a new div so the script should run after to check if it is empty.

Collectives™ on Stack Overflow

hide a div if empty with jquery

2 Answers 2

@ jQuery docs for `:empty` selector-

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related