CODEWITHSUNDEEP
javascriptjquery
Sam
Sam

Reputation: 1666

jQuery hide next element by location on dom

I'm looping through some results and I would like a hide button to hide some extra information e.g. date! Each result will have the same class and Id names I need to make it so if the user clicks the anchor above the date it uses the next date in dom order. 

@foreach ($statuses as $status)
    <h1>{{ $status->user->getNameOrUsername() }}</h1>
    <a class="hide-date" href="#"><i class="fa fa-angle-double-down"></i> Hide</a>
    <span class="date">{{ $status->created_at->diffForHumans() }}</span>
@endforeach

$(document).ready(function(){
    $(".hide-date").click(function(){
        $(".date").hide();
    });
});

Case 2

    @foreach ($statuses as $status)
<div class="content">
    <div class="top-wrapper">
        <h1>{{ $status->user->getNameOrUsername() }}</h1>
        <a class="hide-date" href="#"><i class="fa fa-angle-double-down"></i> Hide</a>
    </div>
    <div class="info-wrapper">
        <span class="date">{{ $status->created_at->diffForHumans() }</span>
    </div>
</div>
    @endforeach

At the moment it hides all of dates

Upvotes: 0

Views: 299

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82241

span .date is next sibling of clicked .hide-date element. you can use .next() to target it along with clicked element context this:

$(".hide-date").click(function(){
    $(this).next().hide();
});

Solution for case 2:

 $(".hide-date").click(function(){
    $(this).closest('.content').find('.date').hide();
});

Upvotes: 3

Let me see
Let me see

Reputation: 5094

This could help you

$(document).ready(function(){
    $(".hide-date").click(function(){
       $(this).next(".date").hide();
    });
});

Upvotes: 0

George Irimiciuc
George Irimiciuc

Reputation: 4633

$(document).ready(function(){
    $(".hide-date").click(function(){
        $(this).parent().find(".date").hide();
    });
});

I sometimes do it like this, if I want to change order later on. .siblings() also works.

It's also a good practice to use .on()

$(document).ready(function(){
    $(".hide-date").on('click',function(){
        $(this).parent().find(".date").hide();
    });
});

Upvotes: 1

Related Questions