0

Saludo. Hice un boton que crea una tarjeta personal con datos de una api, cada vez que aprieto el boton crea una tarjeta. La tarjeta debe tener un boton que me permita remover la tarjeta. en el codigo que paso por el momento el boton de la tarjeta solo imprime "jaja" para simplificar. El problema es que al oprimir el boton que crea la tarjeta, al crearse el boton que imprime "jaja" y agregarle un .addEventListener el evento se dispara automaticamente y el boton tampoco es utilizable despues. en el html simplemente tengo un boton con la propiedad onClick : "requerir()"

function requerir(){fetch('https://randomuser.me/api/').then(
 response=>  response.json()).then(data => generarPersona(data))}

 

 function generarPersona(data){
   
    console.log(data)
    console.log(data.results[0].name.last)
    marcoGeneral = document.getElementById("marcoGeneral");
   
    marco = document.createElement("div");
    marco.setAttribute("class", "marco")
    marcoGeneral.appendChild(marco)
    marcoFoto = document.createElement("div");
    marcoFoto.setAttribute("class", "mFoto")
    marcoLista = document.createElement("div");
    marcoLista.setAttribute("class", "mLista")
    marco.appendChild(marcoFoto);
    marco.appendChild(marcoLista)
    foto = document.createElement("img");
    foto.setAttribute("src", data.results[0].picture.medium);
    marcoFoto.appendChild(foto);
    Lista = document.createElement("ul");
    marcoLista.appendChild(Lista);
    nombre = document.createElement("li");
    nombre.innerHTML = `Nombre: ${data.results[0].name.first} ${data.results[0].name.last}`;
    Lista.appendChild(nombre);
    city =  document.createElement("li");
    city.innerHTML = `Ciudad: ${data.results[0].location.city}`;
    Lista.appendChild(city);
    tel = document.createElement("li");
    tel.innerHTML = `Cel: ${data.results[0].cell}`;
    Lista.appendChild(tel);
    mail =  document.createElement("li");
    mail.innerHTML = `Mail: ${data.results[0].email}`;
    Lista.appendChild(mail);
    boton = document.createElement("button");
    marco.appendChild(boton);
    
    boton.addEventListener("click", console.log("jaja"));


 }

el resultado es que se crea la tarjeta con un boton inutil y se dispara automaticamente el console.log("jaja") sin esperar que haga click

1 respuesta 1

0

Podrías hacer algo así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <button type="button" onclick="generarPersona()">Generar</button>
      <div id="marcoGeneral"></div>
    </div>

    <script>
      let counter = 0;
      const marcoGeneral = document.getElementById("marcoGeneral");

      function generarPersona() {
        counter++;
        marcoGeneral.insertAdjacentHTML(
          "beforeend",
          `
        <div id="${counter}"> 
         <p>Hola</p>
         <button type="button" onClick="eliminarPersona(${counter})">Eliminar</button>
        </div>
        `
        );
      }

      function eliminarPersona(id) {
        const tarjeta = document.getElementById(id);
        marcoGeneral.removeChild(tarjeta);
      }
    </script>
  </body>
</html>

Lo que hace es cada vez que se genera una persona agregar un div con un p y un button (solo a modo de ejemplo), aquí puedes poner lo que desees que sería la generación de la tarjeta.

En este ejemplo aplica insertAdjacentHTML porque permite poner bloques enteros de código sin tener que crear cada elemento y luego hacer el append. También tiene un contador solo para asignarle un id a cada div creado, aquí puedes usar cualquier dato que le estés haciendo llegar, este no se debe repetir ya que es por este id que luego se le indica que tarjeta se debe remover.

Al crear cada tarjeta en el onclik del boton Eliminar se llama a la función eliminarPersona y se le pasa el Id generado para el div padre. Finalmente la función eliminarPersona recibe ese id y se ejecuta al presionar el botón dentro de cada tarjeta, eliminando el nodo hijo de marcoGeneral que tenga el id recibido, es decir el div que corresponde a la tarjeta que se desea eliminar.

2
  • Gracias por la pronta respuesta, es una solucion interesante para este problea en particular pero lo que necesito saber porque es un problema que me encuentro a menudo en los ejercicios que me estan planteando, es si puedo usar un objeto que dspara un evento para crear otro objeto que tenga potencial de disparar un evento sin que este segundo objeto me ejecute el evento automaticamente por la propagacion del primero. Necesito saber si hay alguna forma de que cada objeto por mas padres e hijos que tenga escuche solo su propio evento Commented el 6 sept. 2022 a las 5:39
  • Hay varias cosas que podrías ver en ese caso, uno es algo que se llama stopPropagation. Por otro lado si es posible, solo que quizás una forma de evitar que se dispare el del padre es leyendo el target del evento y actuar solo si el target o el target.id en caso de que el elemento tenga un id (que devuelve un string que puedes comparar en un if) es el elemento que realmente deseas que dispare el evento. developer.mozilla.org/es/docs/Web/API/Event/stopPropagation eso sirve para evitar lo que se conoce como bubbling. Commented el 6 sept. 2022 a las 5:42

Tu Respuesta

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

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