Skip to main content
Mayor claridad en la explicación.
Origen Enlace

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.

Los elementos nuevos que agregas no tienen el evento mouseover asignado. 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
for (let i = 0; i < lista.childElementCount; i++) {
let clases = document.getElementsByClassName('linea');
    asignarEvento(clases[i]);
}

// Se ejecuta en cada evento "Click"
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 como una función para no repetir código, ya que es llamado en 2 ocasiones
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.

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]);
}

// Asignamos el evento "mouseover" en el elemento 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);
}

// Creamos 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.

Origen Enlace

Los elementos nuevos que agregas no tienen el evento mouseover asignado. 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
for (let i = 0; i < lista.childElementCount; i++) {
let clases = document.getElementsByClassName('linea');
    asignarEvento(clases[i]);
}

// Se ejecuta en cada evento "Click"
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 como una función para no repetir código, ya que es llamado en 2 ocasiones
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.