JQuery - remove text-based selection option without value

Question

I have a dropdown as follows:

<select id="select_Boiler"> <option value="boiler_1645">Vaillant 831</option> <option value="boiler_2373">Worcester 24</option> <option value="boiler_3009">Vaillant 835</option> <option value="boiler_4354">Bosch 671</option> </select> 

I need to remove certain options using jQuery, but based on the text, not the parameter value. I tried this without success:

 jQuery("#select_Boiler option[text='Vaillant 835']").remove(); 

I know that I can do the same with the value as shown below and it works, but I need to do it by text

 jQuery("#select_Boiler option[value='boiler_3009']").remove(); 

Answer 1

you can use : contains for filtering based on the text content of the element, but note that it will return partial matches. Therefore :contains('Vaillant 835') will return :contains('Vaillant 835') and :contains('Vaillant 8356')

 jQuery("#select_Boiler option:contains('Vaillant 835')").remove(); 

If you want to filter for equal you need to make a manual filter, for example

 jQuery("#select_Boiler option").filter(function(){ return $.trim($(this).text()) == 'Vaillant 835' }).remove(); 

Answer 2

Here is a case-insensitive version of Arun P Johny's answer.

 jQuery("#select_Boiler option").filter(function() { cur_text = $(this).text().trim().toLowerCase(); return cur_text.indexOf('Vaillant 835') != -1; }).remove();