El problema radica en el hecho que el for
que recorre los elementos con la clase linea
se ejecuta una sola vez (al cargar la pagina), cuando añades lineas nuevas no les estas asignando el evento mouseover
y el bucle ya se ha ejecutado.
Puedes asignar el evento cuando creas la linea nueva:
newL.addEventListener('mouseover', () => { newL.style.display = 'none' });
tu codigo quedaria asi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text">
<button id="boton" type="button">
agregar
</button>
</form>
<div id="bloque" style="width: 20%;">
<ul id="lista">
<li class="linea">Tomates</li>
<li class="linea">Habichuelas</li>
<li class="linea">Arroz</li>
</ul>
</div>
<script>
var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton');
function agregar() {
let item = texto.value;
let newL = document.createElement('li');
newL.classList.add('linea');
newL.addEventListener('mouseover', () => { newL.style.display = 'none' });
let newT = document.createTextNode(item);
lista.appendChild(newL);
newL.appendChild(newT);
}
let clases = document.getElementsByClassName('linea');
for (let i = 0; i < clases.length; i++) {
clases[i].addEventListener('mouseover', () => { clases[i].style.display = 'none' });
}
function mouseOver(arg) {
arg.style.display = 'none';
}
boton.onclick = agregar;
</script>
</body>
</html>
En este caso no haria falta el uso del contador.