jQuery, do not select 'Child' from the element

Question

I have this code that makes of a kind of fancybox, it works well but I wish that the click in the image did not make disappear the '#overlayFancy', it was good that only the click out of the image is to make with this disappear everything, although the image is inside the '#overlayFancy' which occupies 100%*100% of the window and the image is in the middle of the window, 500px*500px.

HTML:

<div class="wrapperExtraImg" style="background-image:url(<?php echo 'admin/' .$extraImg->extra_image_path; ?>)"></div>
<div id="overlayFancy"></div>

js: Zoom in

$(document).on('click', '.wrapperExtraImg' ,function(){
        var image = $(this).attr('id');
        $('#overlayFancy').stop().animate({
            "opacity":"1"
        }, 500);
        $( "#overlayFancy" ).append( "<img src="+image+">" );
});

js: Disappear, return to default page

$(document).on('click', '#overlayFancy' ,function(){
        $('#overlayFancy').stop().animate({
            "opacity":"0",
        }, 300);
        $('#overlayFancy').children('img').remove();
    });

Answer 1

instead of using.

$('#overlayFancy').children('img').remove();

use

$('#overlayFancy').html('');

or else

$('#overlayFancy').find('img').remove();

Answer 2

The easiest way is to listen to the image click and prevent the spread, like this:

jquery:

$(document).on('click', '.wrapperExtraImg', function () {
    $("#overlayFancy").append("<img src=" + $(this).attr('id') + ">").stop().fadeIn(500);
});


$(document).on('click', '#overlayFancy img', function (event) {
    event.stopPropagation();
});

$(document).on('click', '#overlayFancy', function () {
    $('#overlayFancy').stop().fadeOut(300, function () {
        $(this).find('img').remove();
    });
});

See working on Jsfiddle

Answer 3

The problem is that Children() returns a list (which may be from 1) children, so possibly what you want is first() or something like, by your text, I don’t know if the functions of Hide() and show() are any better, than append() and remove()