CODEWITHSUNDEEP
javascriptjquery
WildWing
WildWing

Reputation: 145

jQuery Remove multiple classes on page if 2nd child is empty

I am trying to remove multiple classes on one page if 2nd child within an element is empty. I can get it to work with one but not all classes are being removed.

If .dropwraptext is empty then the entire .dropwrap should be removed.

The html:

      <dl class="toggle clearfix">
     <div class="dropwrap">
 <dt><span><em class="fa fa-plus"></em></span>Title 1</dt>
 <dd class="dropwraptext"><ul>Content 1</ul></dd>
      </div>  

     <div class="dropwrap">
 <dt><span><em class="fa fa-plus"></em></span>Title 2</dt>
 <dd class="dropwraptext"><ul></ul></dd>
</div>  

<div class="dropwrap">
 <dt><span><em class="fa fa-plus"></em></span>Title 3</dt>
 <dd class="dropwraptext"><ul></ul></dd>
</div>   

 <div class="dropwrap">
 <dt><span><em class="fa fa-plus"></em></span>Title 4</dt>
 <dd class="dropwraptext"><ul>content4</ul></dd>
</div>   

            </dl>

The JS:

     $('.dropwraptext ul:empty').parents().eq(1).remove();

View in jsfiddle: http://jsfiddle.net/UNZTV/17/

You will notice that title 2 should be removed but is still showing. Any help is appreciated.

Upvotes: 0

Views: 102

Answers (1)

adeneo
adeneo

Reputation: 318182

You're selecting the second one in the collection only with eq(1), remove that

$('.dropwraptext ul:empty').closest('.dropwrap').remove();

FIDDLE

Upvotes: 3

Related Questions