Hide bootstrap element by class that is inside a specific div

Question

I would like to hide the bootstrap multiselect select all button by the following class: .multiselect-item.multiselect-all that is inside a specific div(That class is added by bootstrap onto HTML Select ). Currently I hide it with javascript like this:

$('.multiselect-item.multiselect-all').addClass('hidden');

But what that does is it hides that element everywhere on the page. I only want hide it in a specified div. I've tried using .parent(), .find(), none which have worked. Any help is much appreciated. I use bootstrap multiselect.

My HTML

<select id="typeCheckboxSelect" class="selectpicker" name="typeSelector[]" multiple="multiple">
   <option class='typeCheckbox' type='checkbox' value='test1'>Test One</option>
   <option class='typeCheckbox' type='checkbox' value='test2'>Test Two</option>
   <option class='typeCheckbox' type='checkbox' value='test3'>Test Three</option>
</select>

Answer 1

Multiple select plugin actually hides your original select element besides its own custom element. So, to hide the desired item, you need to modify your selector a bit more:

$('#typeCheckboxSelect ~ div ul li.multiselect-item.multiselect-all').addClass('hidden');

The above selector will only target the Select All button of the multiple select box which is created as a shadow of #typeCheckboxSelect .

Answer 2

Does Bootstrap add the .multiselect-item.multiselect-all to the select element? If so, you can just add the div's class to your jquery selector to target all divs with that specific class name.

$('.selectpicker.multiselect-item.multiselect-all')