Remove class from element in a parent node with jQuery

Question

I'm trying to remove the class from my .hide elements by clicking on a link. The div that needs to be affect are only the one in the parent <div class="row">.

This is what I've tried - Note, that I've more than one block like this.

$('a[data-action="show-more"]').click(function(e) {
  e.preventDefault();
  $(this).closest('.row').each('.hide').removeClass('hide');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 mb-4">
    <div class="col-lg-4 hide"></div>
    <div class="col-lg-4 hide"></div>
    <div class="col-lg-4 hide"></div>
  </div>
  <div class="col-lg-12 mb-4">
    <a href="#" data-action="show-more">Remove hide class</a>
  </div>
</div>

@HereticMonkey More a close as typo-type situation after your comment than a dupe — mplungjan, Aug 24 '21 at 20:33
@mplungjan whichever. Dupe means a gold badge could close it faster. — Heretic Monkey, Aug 24 '21 at 20:47
Yeah but op already used the correct method to remove the class so it’s your `find` that’s the true answer — mplungjan, Aug 24 '21 at 20:48

score 3 · Accepted Answer · answered Aug 24 '21 at 20:27

3

Close. .each() is for creating a callback function that will iterate over the results. To simply find matching descendants and provide the results to the next chained jQuery function, use .find():

$(this).closest('.row').find('.hide').removeClass('hide');

answered Aug 24 '21 at 20:27

David

208,112
36
198
279

1

A comment and vote to close would have done it – mplungjan Aug 24 '21 at 20:32

Remove class from element in a parent node with jQuery

1 Answers1