if statement to check available elements

i allways found an answer here just be reading the threads but now its time for my very first thread because i was unable to find related questions: this is my target code:

<li>
                <span class="panel">
                    <a href="…" class="image" rel="group">
                        <img title="…" src="…" alt="…" width="128" height="96" />
                    </a>
                    <span class="sizes">
                        <span class="button">
                            <a href="#" class="size1" rel="…" title="1">9x13</a>
                        </span>
                        <span class="button">
                            <a href="#" class="size2" rel="…" title="3">10x15</a>
                        </span>
                        <span class="button">
                            <a href="#" class="size3" rel="…" title="6">20x30</a>
                        </span>
                    </span>
                </span>
                <a href="…" class="image" rel="group">
                    <span class="added"></span>
                    <img title="…" src="…" alt="…" width="128" height="96" class="thumbnail" />
                </a>
</li>

i add two "span" elements through jquery:

$('.sizes a').click( 
        function (e) {
            e.preventDefault();
            $(this).after("<span class='checked'></span><span class='remove'></span>"); 
        }
);

the maximum amount of those s are 3 times in a wrapped div. so i am trying to do is the following:

$(".remove").live('click', function(){
            $(this).hide();
            $(this).prev().hide(); // hide checked span
             if ($(this).parent().parent().children().children().each().hasClass('checked'))
             { 
                $(this).parent().parent().parent().next().children(".added").hide();
             } 
        }
    );

of course my if statement is crap. i try it in my own words: if there are more than one span(class=remove) in span(class=panel) then nothing should happen. but if there is just one span(class=remove) left in span(class=panel) THEN should be hidden

how do i achieve this? there is an online demonstration of this: http://bit.ly/972be4 as 开发者_如何学Cyou can see, every time when i hit a button below an image, the image gets marked by a label. and i want to hide this label (class=added) when no button is selected

Thank you very much! best wishes from germany

Check for

$("span.panel").find("span.remove").length

or just

$("span.panel span.remove").length

You can rewrite the last bit to the following:

$('.remove').live('click'), function() {
    if($(this).parents('.panel').find('.remove').length > 1)
        return;
    // there's only 1 - add the rest of the functionality here
}

Though .parents() and .find() are expensive, but if you don't have a lot of these elements, the overhead is negligible.

Also, if the 'remove' elements are always siblings, change the the second line to:

if($(this).siblings('.remove').length)

The above answers are correct. But as i saw you are not removing those 'span.remove' from DOM so it will count on all the cases once they are added. So you have to check their visibility too.

if($(this).parent().parent().children().find('.remove:visible').length == 0){
   $(this).parent().parent().parent().next().children(".added").hide();
}

will be your condition. This will hide that yellow bar, when last '.remove' is clicked-hidden.

As you just asked how to hide that bar, this just does that. There can be other things you have to consider, which may be flawed, like "re-showing the .added bar in case one is selected again", logic also seems broken.

Good Luck.