CODEWITHSUNDEEP
javascriptjquery
qadenza
qadenza

Reputation: 9293

find a target element of a closest specific parent

I want to hide a target image by clicking on the NEXT button. Here is my try but it doesn't work.

<div class='gwrap'>
<div class='gins'>
<img class='gimg' src='...' alt='img'>
<img class='gimg' src='...' alt='img'>
<img class='gimg' src='...' alt='img'> // target
</div>
 <div class='gbtns'>
<div class='gnext'>NEXT</div>
</div>
</div>

$(document).on('click', '.gnext', function(){  
    let a = $(this).closest('.gwrap').find('.gimg:last-child');
    a.hide();
});

Upvotes: 1

Views: 74

Answers (1)

4b0
4b0

Reputation: 22323

closest traversing up through its ancestors in the DOM tree. Just use parent() with closest like below.

$(document).on('click', '.gnext', function() {
  let a = $(this).parent().closest('.gwrap').find('.gimg:last-child');
  a.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='gwrap'>
  <div class='gins'>
    <img class='gimg' src='...' alt='img'>
    <img class='gimg' src='...' alt='img'>
    <img class='gimg' src='...' alt='img'> // target
  </div>
  <div class='gbtns'>
    <div class='gnext'>NEXT</div>
  </div>
</div>

Upvotes: 1

Related Questions