CODEWITHSUNDEEP
jquery
Fletchling
Fletchling

Reputation: 177

Remove a child that does not have a specific class

I have this html:

<div class="post-content">
    I have something to give away for free. Call
    <span class="togglers">
        <a class="toggler selected" href="#" title="change" style="display: inline;">me</a>
        <span class="divider" style="display: inline;">|</span>
        <a class="toggler" href="#" title="change" style="display: inline;">us</a>
    </span> 
    today and
    <span class="togglers">
        <a class="toggler" href="#" title="change" style="display: inline;">I'll</a>
        <span class="divider" style="display: inline;">|</span>
        <a class="toggler" href="#" title="change" style="display: inline;">we'll</a>
    </span>
    hand deliver it to your doorstep.
</div>

So it looks like this:

I have something to give away for free.  Call [me|us] today and [I'll|we'll] hand deliver it to your doorstep.

The user then has the ability to selece "me" or "us", and "I'll" or "we'll". Once they select one word from each group the containing of that word has a class of "selected". But, I want to do something only when every span.togglers has an a.selected. I'm afraid I've found Javascript answers but I don't know Javascript well enough to understand how it works. How can I do this with jQuery? Or, do I HAVE to do this with Javascript?

Upvotes: 0

Views: 61

Answers (2)

tewathia
tewathia

Reputation: 7298

To check if every togglers has an a.selected you can do this:

if ($('.togglers').length == $('.toggler.selected').length) {
    $(".toggler:not('.selected')").remove(); //removes all .toggler tags that don't have the .selected class 
}

(I am assuming here that your code makes sure only one .toggler can be .selected for every .togglers, otherwise you would have to modify the code to check every .togglers individually)

Upvotes: 1

makallio85
makallio85

Reputation: 1356

If yo want to remove element that doesn't have class 'selected', just do with jQuery:

$(".toggler").each(function(){
  if(!this.hasClass('selected')){
    this.remove();
  }
});

Upvotes: 1

Related Questions