.remove() doesn't achieve desired effect

http://ift.tt/1BJgjqw

I'm trying to write a lightbox script, which can open images when clicked. As you can see in the fiddle, that part works. But closing the image by clicking the lightbox in order to execute the function .remove() doesn't quite work out. Why is that?

$(".discuss-entry img").each(function() {
    var image = $(this);
    var src = image.attr("src");
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var imageWidth = image.outerWidth();
    var imageHeight = image.outerHeight();

    var left = ((windowWidth-imageWidth)/2)
    var top = ((windowHeight-imageHeight)/2)

    if(image.closest("a")[0]===undefined) {
        image.on("click",function(){
            $("<div class='lightbox'><img src='"+src+"' style='top: "+top+"px; left: "+left+"px' /></div>").appendTo("body");
        });
        $(".lightbox").on("click", "img", function() {
            $(this).remove();
        });
    }
});