Question posted in 
A div is dynamically created (divFicheProduit), with a button (buttonLeave) inside it which is also dynamically created and added to this div. This button must close the div it is inside. So I bind a click event listener to it, but it doesn’t work.
As you can see in the log screen, I’m able to get the parent div (i.e the div I want to remove on click), but style properties doesn’t work on it, there is no result even in the console (see console screen).
What am I doing wrong ?
$(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';
});
});
console screen :
2
Answers
Ok Thank you very much for your help, it works now, i had to stop the event propagating as said earlier, here is the new version :
When you click on the "leave" button, the click event seems to be bubbling up and causing the "click" event of the "buttonVoirProduit" to run again – your log shows that this code triggered again, and if we run your code we also see that in the DOM it creates another div and another button. So even though the original div and button were correctly hidden, the new copy is still showing – creating the illusion that your code did not work.
One solution is to stop the event propagating as follows:
Another is to attach the
buttonVoirProduitclick event directly to those classes – but this will only work if those buttons aren’t dynamically created:More info:
P.S. It’s worth noting that, as currently written, and as I alluded to above, if someone clicks the same
buttonVoirProduitbutton more than once, you’ll get multiple copies of your div and Leave buttons layered on top of each other. Clicking the button again won’t re-open a div that has previously been closed via the "Leave" button, it’ll just create a new copy. This is not very efficient or logical, and you should consider revisiting the design of this feature. For example it might be better to remove the div each time the "Leave" button is clicked, rather than just hiding it. Either that, or pre-render the div and button, but leave the div hidden, and when thebuttonVoirProduitis clicked, you can just show the div.