0

Estoy aprendiendo Angular por mi mismo y tengo este problema. Yo genero con un botón un div para contener un texto y un botón eliminar, y a el botón eliminar que está dentro de el div contenedor quiero que tenga (click) para que ejecute mi función deleteDiv(){}.

Con esto genero el div para contener el texto y el botón eliminar.

const prin = document.createElement("div");
      prin.setAttribute('style',
        ` display: flex;
      align-items: center;
      justify-content: center;
      position: relative;`);
      prin.setAttribute('id', `prin1`);
      const prin1 = document.getElementById('pro1');
      prin1?.appendChild(prin);
      const el = document.createElement("div");
      el.setAttribute('style',
        ` height: 40px;
          width: 100%; 
          padding: 10px 5px 10px 5px; 
          display: flex;
          align-items: center;
          justify-content: center;`);
      el.setAttribute('id', `boxpro`);
      const pro1 = document.getElementById('prin1');
      pro1?.appendChild(el);

Con esto genero el texto, el cual es el nombre de un producto.

      pp1 = document.createElement("p");
      pp1.textContent = `Arroz Roa x ` + this.valor + ``;
      pp1.setAttribute('style', `font-size: 12px;`);
      const boxpro = document.getElementById("boxpro");
      boxpro?.appendChild(pp1);

y con esto intento generar el botón eliminar, sé que no se puede hacer "setAttribute('(click)', 'deleteDiv()')", pero es para que se entienda.

      const a_icono = document.createElement("a");
      a_icono.setAttribute('id', `aicono`); 
      a_icono.setAttribute('(click)', `deleteDiv()`);

1 respuesta 1

1

Vale esto te podria ayudar, cambiaremos el "setAttribute" por un "addEventListener" y ahí escucharemos el "click" y configuraremos las acciones a ejecutar:

Prueba lo siguiente:

const a_icono = document.createElement('a'); //aquí puede ser 'button' o 'a'
a_icono.textContent = 'x';
a_icono.setAttribute('id', `aicono`);

a_icono.addEventListener('click', () => console.log('Actions to execute'));

Puedes ver este ejemplo corriendo aquí:

https://codepen.io/jonas_dev/pen/ZEoavEa?editors=1111

2
  • 1
    Me solucionaste la vida, funciona perfecto. ¡Muchas gracias! Commented el 26 sept. 2022 a las 5:44
  • Genial, me alegra mucho! happy coding (:
    – Jonathan G
    Commented el 26 sept. 2022 a las 5:47

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.