CODEWITHSUNDEEP
javascriptjqueryhtml
SxChoc
SxChoc

Reputation: 619

Remove class from next element jQuery

I've got a this html:

<div class="results">
<div class="resultitem" page="1">
    <div class="col-sm-12 odd">
        <div class="col-sm-2 noLRPadding"><p class="memFName">Arsene</p></div>
        <div class="col-sm-2 noLRPadding"><p class="memLName">Wenger</p></div>
        <div class="col-sm-3 noLRPadding"><p class="memEmail">[email protected]</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memLevel">Affiliate</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memCPD">0</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memTarCPD">10</p></div>
        <div class="col-sm-1 hidden noLRPadding"><p class="memDiff">10</p></div>
        <div class="col-sm-1 noLRPadding"><p><a class="memLink" href="/my-membership/cpd-centre/cpd-log/?m=CON-000184210">View</a></p></div>
        <div class="col-sm-1 noLRPadding text-center"><a class="showConfirm" href="#" data-user="CON-000184210" data-username="Arsene Wenger"><i style="font-size: 18px; color: #b43e91" class="fa fa-times-circle"></i></a></div>
    </div>
    <div class="logPanel hidden">
        <p>Hello</p>
    </div>
</div>
<div class="resultitem" page="1">
    <div class="col-sm-12 odd">
        <div class="col-sm-2 noLRPadding"><p class="memFName">Jack</p></div>
        <div class="col-sm-2 noLRPadding"><p class="memLName">Wilshire</p></div>
        <div class="col-sm-3 noLRPadding"><p class="memEmail">[email protected]</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memLevel">Affiliate</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memCPD">0</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memTarCPD">10</p></div>
        <div class="col-sm-1 hidden noLRPadding"><p class="memDiff">10</p></div>
        <div class="col-sm-1 noLRPadding"><p><a class="memLink" href="/my-membership/cpd-centre/cpd-log/?m=CON-000184209">View</a></p></div>
        <div class="col-sm-1 noLRPadding text-center"><a class="showConfirm" href="#" data-user="CON-000184209" data-username="Jack Wilshire"><i style="font-size: 18px; color: #b43e91" class="fa fa-times-circle"></i></a></div>
    </div>
    <div class="logPanel hidden">
        <p>Hello</p>
    </div>
</div>

And what I'm trying to do is show the 'hiddden' logPanel div when the memLink link is pressed so in script I've got:

$(".results").on("click", ".memLink", function (e) {
e.preventDefault();
$(this).nextAll('.logPanel').first().removeClass('hidden');
alert("hello");
});

but tweak as I might I can't get this to work. Could some =one shed any light please?

Thanks, Craig

Upvotes: 1

Views: 2251

Answers (7)

Jagan S
Jagan S

Reputation: 11

Try this one

$(this).parents().find(".resultitem").find('.logPanel:first').removeClass('hidden');
e.preventDefault();

Upvotes: 0

shady youssery
shady youssery

Reputation: 440

Use this code:

$(".memLink").on("click", function (e) {
   $(this).closest(".resultitem").find('.logPanel:first').removeClass('hidden');
   e.preventDefault();
});

Upvotes: 0

Geoff James
Geoff James

Reputation: 3180

OK, so I've had a play and managed to get what you wanted.

I've added a fiddle, here: https://jsfiddle.net/f87echp6/1/ *note, that I've removed your a links and just used # for the demo.

Here's all the jQuery you need: 

$(".memLink").on("click", function (e) {
    e.preventDefault();
    var item = $(this).closest('.resultitem');
    var logPanel = $(item).find('.logPanel');
    $(logPanel).removeClass('hidden');
});

This works in the following way:

  1. Handle the click of the .memLink element
  2. e.preventDefault(); stops the default action happening - which in this case is to open the a's link
  3. Find the memLink's closest resultItem (being the parent div)
  4. Find the child logPanel of the item
  5. Remove the hidden class from the logPanel child

You could surely neaten this down into a couple of lines, but I've stepped it out, so you can see what's happening.

Happy coding!

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

use closest()

$(".results").on("click", ".memLink", function (e) {
    e.preventDefault();
    $(this).closest(".odd").next(".logPanel").removeClass("hidden");
    alert("hello");
});

Upvotes: 0

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14669

find closest class "resultitem", and then find required first element.

    $(this).closest(".resultitem").find(".logPanel:first").removeClass('hidden');

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

Use .closest() 

$(this).closest('.noLRPadding').next().removeClass('hidden');

Upvotes: 0

ventaquil
ventaquil

Reputation: 2848

Sorry but .memLink is not near .logPanel. You must use something like that:

$(this).parent().next('.logPanel').removeClass('hidden');

Upvotes: 0

Related Questions