En cada cambio de entrada, necesito eliminar todos los elementos <li> donde el texto interno no coincide con el valor de entrada. El problema es que no elimina todas las líneas que no coinciden a la vez.
Mi código:
<input name="tag-input" id="tag-input" type='text'> <div id="list-pol"> <ul id="list-pol-select"> <li class="list-pol-item">Fish</li> <li class="list-pol-item">Dog</li> <li class="list-pol-item">Chameleon</li> <li class="list-pol-item">Cat</li> </ul> </div> <script type="text/javascript"> var input = document.getElementById('tag-input'); function updateList(){ if(document.getElementsByClassName("list-pol-item")[0]){ var list = document.getElementsByClassName("list-pol-item"); for (var i = 0; i < list.length; i++) { var tag = list.item(i).innerText; if(input.value !== tag.substring(0,input.value.length)){ list.item(i).remove(); } } } } input.addEventListener('input', updateList); </script>getElementsByClassName le dará una colección en vivo, lo cual es muy confuso. Si el i -ésimo elemento de la colección pierde el nombre de la clase, la colección perderá ese elemento y se desplazará hacia abajo inmediatamente . Si eso sucede mientras intenta iterarlo, como aquí, tendrá problemas.
const foos = document.getElementsByClassName('foo'); foos[0].remove(); console.log(foos.length); console.log(foos[0]); <div class="foo">1</div> <div class="foo">2</div> Primero, conviértalo en una matriz (no activa), o use querySelectorAll , que devuelve una lista de nodos estática.
var input = document.getElementById('tag-input'); function updateList() { for (const item of document.querySelectorAll('.list-pol-item')) { if (!item.textContent.startsWith(input.value)) { item.remove(); } } } input.addEventListener('input', updateList); <input name="tag-input" id="tag-input" type='text'> <div id="list-pol"> <ul id="list-pol-select"> <li class="list-pol-item">Fish</li> <li class="list-pol-item">Dog</li> <li class="list-pol-item">Chameleon</li> <li class="list-pol-item">Cat</li> </ul> </div>Si pega "Pez", verá que Pescado es el único elemento que queda.
Pero su lógica actual es rara: ¿realmente quiere .remove() los elementos que no coinciden? A menos que alguien pegue un texto que coincida exactamente, se eliminará todo. ¿Quería alternar la visualización de los elementos en su lugar?
var input = document.getElementById('tag-input'); function updateList() { for (const item of document.querySelectorAll('.list-pol-item')) { item.classList.toggle('hidden', !item.textContent.startsWith(input.value)); } } input.addEventListener('input', updateList); .hidden { display: none; } <input name="tag-input" id="tag-input" type='text'> <div id="list-pol"> <ul id="list-pol-select"> <li class="list-pol-item">Fish</li> <li class="list-pol-item">Dog</li> <li class="list-pol-item">Chameleon</li> <li class="list-pol-item">Cat</li> </ul> </div>También podría considerar comparar la entrada en minúsculas con el elemento de la lista en minúsculas, en lugar de requerir una coincidencia de mayúsculas y minúsculas para que se muestren los elementos.