Question

I have a nested structure that can’t be edited because of some hosted jQuery, so I need to hide the last element in each of multiple forms, the problem being they all have the same class name, however the one that needs to be killed at least is coming down the pipe without a wrapper div. There are maybe 12 forms with the following (truncated) mark-up:

<form class="select-form>
<div class="select-wrapper">
  <div class="select-list">...</div>
</div>
<div class="select-wrapper">
  <div class="select-list">...</div>
</div>
<!--No Wrapper I need this killed -->
   <div class="select-list">...</div>
</form>

So basically I need any class of select-list that doesn’t have the parent/container element of select-wrapper to have it’s class of “select-list” changed to “hidden”. How to I word this in jQuery speak? I have tried variations on the following but can’t seem to hook the element properly:

<script>$('.select-form div').not(':has(.selector-wrapper)').addClass('hide-me').css('display', 'none');</script>

Answer 1

In CSS the > selection operator means direct descendants (children) only, so you could do something like:

$('.select-form>.select-list').addClass('hide-me').hide();

This will operate only on elements with a class .select-list which are direct children of an element with a class .select-form.