Necesito eliminar todos mis elementos excepto Seleccionar valor de la identificación del menú cuando el usuario hace clic encima de un menú desplegable, para eso hice un evento.
Esto es lo que probé:
const menu = document.querySelector("#menu"); menu.addEventListener("click", () => { let sonsLength = menu.length; for (let i = 0; i < sonsLength; i++) { if (menu[i].value != "Select") { menu.removeChild(menu[i]); sonsLength = sonsLength - 1; } } }) <select id="menu"> <option value="Select">Select</option> <option value="Madrid">Madrid</option> <option value="Barcelona">Barcelona</option> <option value="Sevilla">Sevilla</option> <option value="Bilbao">Bilbao</option> <option value="Manchester">Manchester</option> <option value="Paris">Paris</option> </select>Sin embargo, mi ciclo no funciona como supuse, porque el usuario debe hacer clic varias veces sobre el menú desplegable para eliminar todos los elementos excepto el primero y, según tengo entendido, debe eliminar los elementos cuando el usuario hace clic una vez.
¡Gracias!
Todavía no estoy seguro de si esto es lo que quieres lograr, pero tal vez tengo razón.
const menu = document.querySelector("#menu"); menu.addEventListener("change", () => { let sonsLength = menu.length; for (let i = 0; i < sonsLength;) { if (menu[i].value != "Select") { menu.removeChild(menu[i]); sonsLength = sonsLength - 1; } else i++; } }) <select id="menu"> <option value="Select">Select</option> <option value="Madrid">Madrid</option> <option value="Barcelona">Barcelona</option> <option value="Sevilla">Sevilla</option> <option value="Bilbao">Bilbao</option> <option value="Manchester">Manchester</option> <option value="Paris">Paris</option> </select>Respondiendo a su pregunta sobre el else en el ciclo for:
Si elimina un elemento de una matriz, todos los demás índices de elementos avanzan una posición. P.ej
tienes una matriz
[0, 1, 2]
Ahora el valor 0 está en el índice 0, el valor 1 está en el índice 1 y el valor 2 está en el índice 2.
Cuando ahora eliminas el primer elemento obtienes
[1, 2]
Entonces ahora el valor 1 está en el índice 0 y el valor 2 está en el índice 1.
Para mi ciclo, eso significa que si elimina un elemento de la matriz, no debe incrementar el índice (i) porque todos los demás elementos se mueven al índice real (i). Solo si dejo un elemento tengo que aumentar el índice para llegar al siguiente elemento
const menu = document.querySelector("#menu"); menu.addEventListener("change", (event) => { let selectedValue=event.target.value; menu.innerHTML=`<option value=${selectedValue}>${selectedValue}</option>`; }) <select id="menu"> <option value="Select">Select</option> <option value="Madrid">Madrid</option> <option value="Barcelona">Barcelona</option> <option value="Sevilla">Sevilla</option> <option value="Bilbao">Bilbao</option> <option value="Manchester">Manchester</option> <option value="Paris">Paris</option> </select>Cambios