.parents().removeClass() not working

Question

i got this javascript, trying to remove a class on a parent element:

$(this).parents(".box").removeClass("expanded");

on this html:

<div class="box trx">
<a href="javascript:;" class="open-content"><?php the_post_thumbnail('thumbnail'); ?></a>
<div class="expandable">
    <?php the_content(); ?>
    <span class="simple">
        <a class="cunload" href="javascript:;">Close</a>
    </span>
</div>
</div>

Unfortunately, this doesn't work so far. I've done several tests like:

$(this).parents(".box").removeClass("trx");

and

$(this).parents(".box").addClass("exd");

It all works. I'm using jQuery 1.6.2 and jQuery masonry on a wordpress site. There's a live demo here to see it all (not)working. Basically it works but the fact that the class isnt removed from the div does reopen instantly the div and its content. Am pretty confused on why it does not remove the .expanded class.

EDIT: i just understood that the class is there yet when the document is loaded. It's being added afterwards on a click on a picture, therefore i think my removing problem comes from this. Sorry for the misguiding explanation.

Answer 1

You have a click handler on the .box element.

And inside it you have a click handler on the .cunload element.

Since the .cunload is nested in the .box both elements receive the click event when you press the close button, and so it re-opens.. (due to events bubbling up the DOM hierarchy)

Change your .cunload handler to

$('.cunload').click(function(e){
            e.stopPropagation();
            restoreBoxes();
            $(this).parents(".box").removeClass("expanded");
});

Answer 2

maybe this will work:

$(this).parents(".box").filter(".expanded").removeClass("expanded");

Answer 3

If I use this code:

$(".cunload").click(function() {
    $(this).parents(".box").removeClass("trx");
});

With this HTML:

<div class="box trx">
<div class="expandable">
    <span class="simple">
        <a class="cunload" href="#">Close</a>
    </span>
</div>
</div>

Then, it seems to work exactly as designed and you can see it work here: http://jsfiddle.net/jfriend00/Djjuz/. Click on the close link and see that the background color changes when the trx class is removed.

So, there must be something else in your code that you are not disclosing that makes it not work. Please include the exact code you use to trigger the function and perhaps explain better what you are trying to do and what you observe happening or not happening.

If you expect us to use the link to the working page, please describe where the relevant code is (there are a lot of JS files in that page) and describe what you click on and what you expect the result to be. So far, you've only told us that something doesn't work, but not given us enough context to figure out what exactly doesn't work, what code you're using to trigger it and how we could possibly reproduce the issue or see the issue ourselves. You have to help yourself here by giving us enough info if you want quality help.

Also, do you realize that when you pass a selector the the .parents("selector") method, that it limits the operation to only the parents that match that selector? So .parents(".box") will ONLY operate on the parent objects that have a class"box".

Answer 4

I think it works, but your script expands the boy again after clicking on the close button. You should change the header of your close event handler function to:

function(event) {
    event.stopPropagation();
    [...]

so that the same click event can not bubble up the document hierarchy.