HTML datalist hide option from list

Question

I am trying to hide an option from datalist (I am not trying to hide on user input). I tried adding hidden attribute but it still show in the dropdown. Also display:none doesnt seem to work. I can use javascript / jquery. Hiding select option would work like this:

mySelect.find('option[value='+something+']').prop('selected', false).hide()

 <input list="test"> <datalist id="test"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome" hidden> <option value="Opera"> <option value="Safari"> </datalist> <input list="a"> <datalist id="a"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome" style="display:none;"> <option value="Opera"> <option value="Safari"> </datalist>

Answer 1

<option> s can be omitted from the list using the disabled attribute.

 document.getElementById('toggle').addEventListener('change', (e) => { let opt = document.querySelector('option[value=Chrome]') opt.toggleAttribute('disabled', e.target.checked) })

 <input list="test" /> <datalist id="test"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome" disabled> <option value="Opera"> <option value="Safari"> </datalist> <label> <input checked type="checkbox" id="toggle" /> disable Chrome <labe>