0

Estoy varado en un código. El código consiste en agregar elementos a una lista y después borrar cada elemento ' li ' con solo un click en el mismo. ¿En que estoy fallando? Por ejemplo agrego tres elementos a mi lista, y yo quiero borrar el segundo elemento pero se me borra el primer elemento, quiero borrar el tercer elemento pero se borra el segundo elemento de la lista. Me he puesto a pensar que no estoy usando bien el siclo for(){}. Aparte de esto en la consola me aparece error.

/*variables*/
let inpText=document.getElementsByName("inp")[0];
let btn=document.getElementsByName("inp")[1]; 
btn.setAttribute("value","add");
let padre=document.getElementById("lista");
let hija=padre.children;

/*funciones*/
Limpiar = () => inpText.value="";

Agregar= () => {
  let x = document.createElement("li");
  x.textContent=inpText.value;
  padre.appendChild(x);
}

Eliminar = () => {
  for(let i=0;i<hija.length;i--){
    padre.removeChild(hija[i]);
  }
}

/*eventos*/

inpText.addEventListener("click",Limpiar);
btn.addEventListener("click",Agregar);
padre.addEventListener("click",Eliminar);
<input type="text" name="inp" placeholder="agregar items">
<input type="button" name="inp">    
<ul id="lista">
</ul>

1
  • Súper... muy buena tu respuesta sencilla y óptima. Muchas gracias. También estuve cacharreando y encontré otra forma de eliminar los items por ejemplo: Eliminar=(e)=>{ for(let i=0;i<hija.length;i--){ padre.removeChild(e.target); } } /* lo malo es que en la consola me sigue dando error. Pero el código funciona. Para mi esto es un misterio*/ el 6 jun. 2020 a las 20:33

2 respuestas 2

3

Bueno, corregido tu código.

En realidad la forma como estabas eliminando no es la apropiada. Entiendo que deseas eliminar el elemento

< li >

que seleccionas. Siendo así he comentado tu funcion Eliminar y en ves de darle la orden al padre, al momento de agregar un elemento le agrego el evento diciendole que al ser presionado lo remueva.

Te lo dejo para que compares con el tuyo.

/*variables*/
let inpText=document.getElementsByName("inp")[0];
let btn=document.getElementsByName("inp")[1]; 
btn.setAttribute("value","add");
let padre=document.getElementById("lista");
let hija=padre.children;

/*funciones*/
Limpiar = () => inpText.value="";

Agregar= () => {
  let x = document.createElement("li");
  x.textContent=inpText.value;
  // Anexamos el evento que deseamos al elemento.
  x.addEventListener("click", () => {
    x.remove();
  });
  padre.appendChild(x);
}

// No es la forma apropiada
/*Eliminar = () => {
  for(let i=0;i<hija.length;i--){
    padre.removeChild(hija[i]);
  }
}*/

/*eventos*/

inpText.addEventListener("click",Limpiar);
btn.addEventListener("click",Agregar);
// Se comenta dado que el evento se lo dimos al elemento en si que deseamos eliminar en este caso
// padre.addEventListener("click",Eliminar);
<input type="text" name="inp" placeholder="agregar items">
<input type="button" name="inp">    
<ul id="lista">
</ul>

Como puedes observar, comenté lo siguiente:

Eliminar = () => {
  for (let i = 0; i < hija.length; i--) {
    padre.removeChild(hija[i]);
  }
}

padre.addEventListener("click",Eliminar);

Modifiqué tu método Agregar de la siguiente manera:

Agregar = () => {
  let x = document.createElement("li");
  x.textContent = inpText.value;
  // Anexamos el evento que deseamos al elemento.
  x.addEventListener("click", () => {
    x.remove();
  });
  padre.appendChild(x);
}

Espero te sirva

0
0

Tal vez el error pueda estar en la función Eliminar:

Eliminar = () => {
   for(let i=0;i<hija.length;i--){
       padre.removeChild(hija[i]);
   }   
}

Si te fijas bien el incrementador del bucle estás haciendo i-- con lo que los valores de i van a ser 0, -1, -2, ... con lo que obtendrás un error al acceder al índice hija[i].

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.