I have a custom function called gainGold() which adds a new div element to a parent container in the following way:
function gainGold() {
$('#main').append('<div class="popup popup-gold">+ 14</div>');
}
In the actual implementation, the number displayed is dynamic and there are additional functionalities involved, but for simplicity's sake, let's stick with this example. This newly added element has a CSS animation that lasts for 0.5 seconds, after which I want it to be removed from the DOM. Currently, I achieve this by using a setTimeout like so:
setTimeout(function(){
$('.popup-gold').remove();
}, 510);
However, this approach is not ideal because it prevents multiple instances of the 'popup' elements from being visible simultaneously since the jQuery selector targets all instances when removing them.
Is there a way to create these dynamic div elements and have more granular control over their removal individually?
Edit: Here is a Jsfiddle demonstrating the solution. I ultimately followed Rob's advice, assigning each appended element to a variable and handling their removal effectively. Thank you!