Hace unas semanas empecé con JavaScript
, acabo de aprender a utilizar EventListener
, por favor ayúdenme, ¿cómo puedo remover un nodo creado usando EventListener
?.
En el ejemplo que mostraré más abajo asigno un EventListener a un botón para que genere nodos (cajas div), lo que quiero es poder dar clic sobre cada caja creada para removerla.
Hice el siguiente código pero no está funcionando para remover los nodos creados, solamente funciona si tengo las cajas div agregadas manualmente en el HTML y llamándolos con su id. Aquí el código:
// FUNCION PARA CREAR CAJA
function createBox() {
var box = document.createElement('div');
box.className = 'box';
box.id = 'newBox';
var container = document.getElementById('container');
container.appendChild(box);
}
// EVENTO PARA CLIC BOTÓN Y CREAR CAJA
var createUnit = document.getElementById('btn');
createUnit.addEventListener('click', createBox);
// FUNCION PARA REMOVER CAJA
function deleteBox() {
var deleteBox = document.getElementById('newBox').remove();
this.remove();
}
/* EVENTO PARA CLIC CAJA Y REMOVER
aquí invoco por el id newBox que asigné más arriba */
var deleteUnit = document.getElementById('newBox');
deleteUnit.addEventListener('click', deleteBox);
En la consola me figura el error:
Uncaught TypeError: Cannot read property 'addEventListener' of null