Search code examples
javascripthtmlbootstrap-multiselect

Hide bootstrap element by class that is inside a specific div

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>
Solution

  • 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.