События внутри addEventListener для динамически созданного элемента не работают ⇐ Javascript

[Anonymous]

Div создается динамически (divFicheProduit) с кнопкой (buttonLeave) внутри него, которая также динамически создается и добавляется в этот div. Эта кнопка должна закрыть div, внутри которого она находится. Поэтому я привязываю к нему прослушиватель событий щелчка, но он не работает. Как вы можете видеть на экране журнала, я могу получить родительский div, поэтому div, который я хочу удалить при щелчке, но свойства стиля на нем не работают, результата нет даже на консоли (см. экран консоли) . Что я делаю не так?

Код: Выделить всё

$(document).click('.buttonVoirProduit',async()=>{
console.log('buttonVoirProduit Clicked');
/*console.log('buttonVoirProduitId Ooutside : ', buttonVoirProduitId);*/
console.log('buttonId : ', buttonVoirProduitId);
const divFicheProduit = document.createElement('div');
divFicheProduit.style.width = '100%';
divFicheProduit.style.height = '100%';
divFicheProduit.style.opacity = '80%';
divFicheProduit.style.background = 'black';
divFicheProduit.style.display = 'flex';
divFicheProduit.style.position = 'absolute';
divFicheProduit.style.left = '50%';
divFicheProduit.style.transform = `translateX(-50%)`;
divFicheProduit.style.top = '200px';
divFicheProduit.id = `ficheProduit${buttonVoirProduitId}`;
divFicheProduitId = divFicheProduit.id;
console.log(`divFicheProduitId after buttonVoirProduit clicked : `,divFicheProduitId);

const buttonLeave = document.createElement('img');
buttonLeave.src = 'icones/cancel.png';
buttonLeave.classList.add('buttonLeave');
buttonLeave.id = `buttonLeave${buttonVoirProduitId}`;
buttonLeave.style.right = '0px';
buttonLeave.style.top = '0px';
buttonLeave.style.cursor = 'pointer';
buttonLeave.style.zIndex = '1000';
buttonLeave.style.position = 'absolute';
buttonLeave.style.width = '25px';
buttonLeave.style.height = 'auto';
buttonLeave.style.aspectRatio = 'preserve';
buttonLeave.style.filter = 'brightness(0) saturate(100%) invert(92%) sepia(3%) saturate(2225%) hue-rotate(339deg) brightness(101%) contrast(91%)';

const imgFicheProduit = document.createElement('img');
imgFicheProduit.style.width = '50%';
/*divFicheProduit.style.zIndex = '1000';*/
divFicheProduit.append(buttonLeave);

document.body.appendChild(divFicheProduit);

buttonLeave.addEventListener('click', async() =>{
console.log('buttonLeave Clicked');
console.log(buttonLeave);
const buttonLeaveParent = buttonLeave.parentElement;
console.log(buttonLeaveParent);
buttonLeaveParent.style.display = 'none';
});

});

экран консоли:
введите здесь описание изображения

Подробнее здесь: https://stackoverflow.com/questions/793 ... oesnt-work