How do I use jQuery to do and undo a series of actions using two different buttons?

I am using a jQuery to generate some content and it is working fine:

		$( ".compare-list i.fa-share-alt" ).each(function(index) {
	    $(this).on("click", function(){
				$(this).closest('div.box').prepend('<div class="socialShareIconsContainer"><div class="socialShareIcons"><div class="socialShareIcon"><i class="fa fa-facebook"></i></div><div class="socialShareIconClearer"></div><div class="socialShareIcon"><i class="fa fa-twitter"></i></div><div class="socialShareIconClearer"></div><div class="socialShareIcon"><i class="fa fa-envelope"></i></div></div><a class="closeSocialShareIcons">x</a></div>');
	    });
		});

Select allOpen in new window

What I need to do is, when I click on that a.closeSocialShareIcons which was created on the fly, I would like to remove the div.socialShareIconsContainer that was created on the fly with all its contents


I've tried quite a lot of things but I really give up now :(

thanks in advance