Whats the best way to hide elements when the data attribute doesn't match?

Question

Consider the following:

jQuery('document').ready(function($) {
  $('#num-locations input[type="checkbox"]').on('click', function(e) {
    if (e.target.checked) {
      dataId = e.target.dataset.location;
      console.log(dataId);
      $('.jobs-listing [data-city]').not('[data-city*="'+dataId+'"]').hide();
    } else {
      $('.jobs-listing [data-city]').show();
    }
  });
});

Here's an example of the HTML, there could be tons of these:

<div class="manage-wrapper  d-flex py-5 eachJob" data-city="Ottawa" data-province="Ontario">
    <div class="manage-text w-7">
        <h4 class="font-weight-bold mt-0 mb-1 job-title"></h4>
        <p class="job-description"></p>
    </div>
    <div class="manage-aside text-right w-3">
        <h4 class="font-weight-bold mt-0 mb-1 job-location">Ottawa</h4>
        <p class="mb-0 job-province">Ontario</p>
        <a href="#" class="btn btn-primary job-url" tabindex="-1">VIEW JOB</a>
    </div>
</div>

Expected: Apply display none, only to the parent div, in this case '.manage-wrapper'
Actual: Everything on the page is hidden, because a "display: none" is applied to every dive inside the .manage-wrapper but not applied to the .manage-wrapper it's self.
There are no console errors when you click said checkbox.

Whats the proper way to apply: display: none to any div with a class manage-wrapper upon click when the data-location does not match the data-city?

[And]

When You uncheck said checkbox, whats the proper way to restore the "hidden" elements?

@MattBunch I left a comment on your proposed answer, hope that clears up the confusion — TheWebs
– TheWebs, Commented Jan 6, 2019 at 3:00

mbunch · Accepted Answer · 2019-01-06 03:37:45Z

1

Slightly simplified, but should get you going.

$('document').ready(function($) {
  $('#num-locations input[type=checkbox]').on('change', function() {
    $.each($('.manage-wrapper'), function(key, value) {
      if ($(value).data('location') != $(value).data('city')) {
        $(value).hide();
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num-locations">
  <input type="checkbox" />
</div>
<div class="manage-wrapper  d-flex py-5 eachJob" data-city="Ottawa" data-province="Ontario">
  <div class="manage-text w-7">
    <h4 class="font-weight-bold mt-0 mb-1 job-title"></h4>
    <p class="job-description"></p>
  </div>
  <div class="manage-aside text-right w-3">
    <h4 class="font-weight-bold mt-0 mb-1 job-location">Ottawa</h4>
    <p class="mb-0 job-province">Ontario</p>
    <a href="#" class="btn btn-primary job-url" tabindex="-1">VIEW JOB</a>
  </div>
</div>

edited Jan 6, 2019 at 3:37

answered Jan 6, 2019 at 2:49

mbunch

5691 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheWebs Over a year ago

The only issue with this is that the checkbox is not with in the div manage-wrapper it is in a sidebar under a div called #num-locations Hence why I have: $('#num-locations input[type="checkbox"]' I want to hide all manage-wrapper's that don't match that checkboxe's data-id (in this case, the value might be Ottwa)

mbunch Over a year ago

@TheWebs I've made a few changes, let me know if this does/doesnt work for you.

Collectives™ on Stack Overflow

Whats the best way to hide elements when the data attribute doesn't match?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related