Jquery: Hide child <div> when user clicks inside parent <div>

Question

I have the following code and would like to hide a DIV when the user clicks anywhere inside it's parent DIV. If the user clicks outside of the parent DIV then nothing would happen.

<div id="BodyField">
    <div class="video-field-new"></div>
</div>

So I would like the DIV with "video-field-new" to hide when user clicks inside of #BodyField.

Background: I have a small banner that lays over a video in the corner when the video is new, but I do not want it to block the video player when the user plays the video. So ideally when the user clicks to play the video, which is inside the #BodyField then the banner will hide.

Answer 1

$('#BodyField').on('click', function() {  
    $(this).children('.video-field-new').hide();
});

You will also need to prevent the click event from the .video-field-new from propagating up to its parent, otherwise clicking the video to play will cause itself to be hidden.

$('#BodyField .video-field-new').on('click', function(e) {  
    e.stopPropagation();
});

Answer 2

$(".video-field-new:parent").click(function() {
    $(this).find(".video-field-new").hide();
});