jQuery hide only the empty element

Question

I'm working on a tagging feature and the wrapping element for the tag (span class="tag") is showing without content. I need to hide the empty one and show the tags with content. The problem is my logic is affecting all the tags, not just the empty one. How can I target just the empty tag?

 $(".tag:empty").hide();
        $('.tag_btn').live('click', function() {
             if (!$('.tag:empty')){
                 $('.tag').show();
             }
        });

How about hiding the .tag_btnthat's right next to the empty ones? $(".tag:empty").sibling('.tag_btn').hide(); — Eric
– Eric, Commented Jul 8, 2011 at 19:05

SeanCannon · Accepted Answer · 2011-07-08 20:04:06Z

1

EDIT: Ok so when you click .tag_btn, you want to display all the non-empty .tags ? Try this:

$('.tag_btn').live('click', function() 
{
    $('.tag:not(:empty)').show();
});

edited Jul 8, 2011 at 20:04

answered Jul 8, 2011 at 19:03

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

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

3 Comments

ElonU Webdev Over a year ago

+1 Your answer is better than mine. Good catch seeing that $('.tag:empty') is a selector and not a boolean...

geraddavis Over a year ago

tag_btn is the selector for the button which generates the tag.

geraddavis Over a year ago

Thanks. I wasn't aware you could apply the seudo-class :not in jQuery. I'm having a new issue of the tag still being hidden after '.tag_btn' is clicked. It's not until the second tag is created that the two non-empty tags are displayed. I figured the live event would catch that. Oh well..

ElonU Webdev · Accepted Answer · 2011-07-08 19:04:00Z

0

I'm not sure what could be going on, but would this alternate way work?

$('.tag').each(function(){
    var tag = $(this);
    if ($.trim(tag.text() != ""))
    {
        tag.show();
    }
});

answered Jul 8, 2011 at 19:04

ElonU Webdev

2,45914 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery hide only the empty element

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related