Los elementos nuevos que agregas no tienen el evento mouseover
asignado. Puedes asignarselo en la función agregar
al mismo crear el elemento.
Aquí tienes tu ejemplo funcionando y comentado:
var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton').onclick = agregar;;
// Solo se ejecuta en la primera carga, por lo que los únicos afectados serán los elementos ya existentes de inicio pero los nuevos no.
for (let i = 0; i < lista.childElementCount; i++) {
let clases = document.getElementsByClassName('linea');
asignarEvento(clases[i]);
}
// SeAsignamos ejecutael evento "mouseover" en cadael eventoelemento "Click"agregado.
function agregar() {
let newL = document.createElement('li');
newL.classList.add('linea');
let newT = document.createTextNode(texto.value);
lista.appendChild(newL);
newL.appendChild(newT);
asignarEvento(newL);
}
// Lo dejamos comoCreamos una función encargada de asignar el evento a un elemento para no repetir código, ya que es llamado en 2 ocasiones: en la primera carga y trás cada elemento agregado.
function asignarEvento(elemento) {
elemento.addEventListener('mouseover', function() {
this.style.display = 'none';
})
}
Como puedes ver ya no existe tampoco la variable ´contador´ puesto que no era necesario trabajar con ella ya que conocer el número de elementos solo es necesario en la primera carga.
Espero haberte podido ayudar.