2

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.

kevin
  • 618
  • 8
  • 24
  • Does `$(this).parents(".box")` expression actually return the element you think it does? – Ilia G Oct 20 '11 at 23:37
  • i didn't see class `expanded` on your live demo – GusDeCooL Oct 20 '11 at 23:40
  • @ GusDe Coool; Not when the page loads, true. But it does whenever i click on one of the blocs. – kevin Oct 20 '11 at 23:42
  • What element has the "expanded" class? That is not shown in your HTML or described in your post. We can't help you remove it if we don't know where it is! – jfriend00 Oct 20 '11 at 23:47
  • Possible duplicate of [jQuery parent(); function removeClass(); not working (bug)](http://stackoverflow.com/questions/33749372/jquery-parent-function-removeclass-not-working-bug) – Alex Safayan Jun 18 '16 at 05:06

4 Answers4

2

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");
});
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Thanks a lot Gaby, it works just fine! I didnt know about the nested fact. – kevin Oct 20 '11 at 23:55
  • I think i got it, on the "bubbling phase": "Event listeners registered for this phase must handle the event after it has reached its target." Thanks for the link. – kevin Oct 21 '11 at 00:08
0

maybe this will work:

$(this).parents(".box").filter(".expanded").removeClass("expanded");
Alon Eitan
  • 11,997
  • 8
  • 49
  • 58
0

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".

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • I did already as explained in my first text. I can remove the "trx" class. But as Gus says, the class am looking for does not exists on the page load, it's being added after, on the click on a picture. Might come from there. – kevin Oct 20 '11 at 23:44
  • So, you're asking why you can't remove a class that doesn't exist? If you don't want to explain the issue, then I'll go help someone else. I did not understand from your first post what the problem is. What element has the `class="expanded"`? There are none in your HTML that show that class. – jfriend00 Oct 20 '11 at 23:45
  • Yes i just realized afterwards my mistake, sorry, am not an expert in js. I should change my explanation with "How to remove a class that does not exists on the domready". – kevin Oct 20 '11 at 23:48
  • @jfriend00, the `.expanded` is added dynamically when you click on the thumbnails.. – Gabriele Petrioli Oct 20 '11 at 23:53
  • .expanded is added to WHAT object? If you want to remove a class that is added after the DOM is ready, then you need to call your function at some time after the class is added. The most likely way to do this would be to call it when whatever event happens that adds the class. – jfriend00 Oct 21 '11 at 00:09
0

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.

FloydThreepwood
  • 1,587
  • 14
  • 24