Estoy buscando ocultar solo una opción dentro de un cuadro de selección usando Jquery/Javascript. Probé CSS para mostrar: ninguno, pero no funciona en todos los navegadores y no puedo editar la opción directamente para agregar "oculto" o similar.
https://impactdigitaldev.co.uk/bookly/
En la primera "categoría" desplegable, intento ocultar la opción "alquiler de carriles". Lo que puede ver tiene un valor = "5", así que probé el siguiente script, pero no funciona. Si tiene alguna sugerencia, le estaría muy agradecido.
$("#cats option[value='5']").remove();También probé sin la identificación y aún no tuve suerte.
$("option[value='5']").remove(); $("select option[value='5']").remove() <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option value="0">Category</option> <option value="1">coaching</option> <option value="5">lane hire</option> </select>Violín de trabajo https://codepen.io/hermes14/pen/VwyrXjr?editors=1111
$("#cats option[value='5']").remove();Funciona, tiene un error de tipo no detectado en su consola, lo que probablemente sea la razón por la cual el script no se ejecuta.
Como puede ver en la captura de pantalla a continuación, ejecuté su fragmento en la consola del navegador, lo que resultó en una opción eliminada.
En caso de que esté interesado, esto se puede manejar fácilmente a través de javascript normal como tal:
document.querySelector("#cats option[value='5']").remove(); <div class="bookly-form-group" id="cats" data-type="category"> <label>Category</label> <div> <select> <option value="0">Category</option> <option value="1">coaching</option> <option value="5">lane hire</option> </select> </div> </div>No necesita escapar de la cita en bloque:
document.querySelector("option[value='5']").remove(); <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <select>