How do I hide empty option values with classes?

[Deleted user]

What is the current behavior?

My empty value tags still appear in the ui.

I put style="display:none;" in the option tag.
I put option[value=""] {display: none;} in the style sheet

I even tried using the hidden attribute

What is the expected behavior?

I want to hide an option tag with empty value. Is there a custom css class I need to use?

[Michael Harris]

You might consider using the removeOption method on the widget. The options that are rendered are li tags not option tags. The widget just uses the option tags from the original select to build the list before the widget takes the place of and hides the underlying select.

Otherwise you might try using css to hide li tags with no text that are under the ui-multiselect-checkboxes css class.

[Deleted user]

You might consider using the removeOption method on the widget. The options that are rendered are li tags not option tags. The widget just uses the option tags from the original select to build the list before the widget takes the place of and hides the underlying select.

Otherwise you might try using css to hide li tags with no text that are under the ui-multiselect-checkboxes css class.

Otherwise you might try using css to hide li tags with no text that are under the ui-multiselect-checkboxes css class.

This seems my best option I didn't know it rendered in li tags. So the css would then be
ui-multiselect-checkboxes li[value=""] {display: none'}

[Michael Harris]

If you inspect the HTML on the demo page, it's not the li that has a value but the input tag underneath it. You'd end up with a selector like 'li input[value=""]'. That selects the checkbox though. You would need some JavaScript to hide the parent based on that since I don't think css has a parent selector.

Something like: document.querySelectorAll('li input[value=""]').forEach((el) => el.closest('li').className = "hidden")