Javascript remove multiple html list elements

On every change of input, i need to remove all <li> elements where inner text don’t match the input value. The problem is: it don’t remove all lines that doesn’t match at once.

My code:

        <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>