Tengo un input que al rellenarlo y enviarlo crea una nueva línea en una lista con una clase. En la función creo la línea, su texto, los asocio, le defino la clase.
Luego quiero que exista un evento en el que, al pasar por encima de cualquiera de las líneas definidas con una clase, se borren.
Añado un contador para poner un límite al bucle for
y así, desde dentro, poder crear una variable local que contenga todas las clases y se defina cada vez que sucede el evento. Pero... No reconoce las clases nuevas! ¿Qué está ocurriendo?
var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton');
var contador = 3;
function agregar() {
let item = texto.value;
let newL = document.createElement('li');
newL.classList.add('linea');
let newT = document.createTextNode(item);
lista.appendChild(newL);
newL.appendChild(newT);
contador++;
}
for (let i = 0; i < contador; i++) {
let clases = document.getElementsByClassName('linea');
clases[i].addEventListener('mouseover', function() {
this.style.display = 'none';
contador--;
})
}
boton.onclick = agregar;
<!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>
</body>
</html>
Como siempre, muchas gracias