Jquery Hide parent div onclick

Question

I want to hide parent div when a child div is clicked.I have appended the div when "add more" button is clicked.In short when "X" in div is clicked its parent div should hide.Here is my Fiddle

$( "#appenddiv" ).on( "click", function() {
     $( ".uploadimg" ).append( "<div class='image'><div class='delete'>X</div></div>" );
});
$(".delete").on("click",function(){
    $(this).parent().hide();
});

Answer 1

The reason why your code not working is, That element is being appended in to the DOM dynamically, so we have to use event delegation to make the code work..

Try,

$(".uploadimg").on("click",".delete",function(){
    $(this).parent().hide();
});

DEMO

Answer 2

You need event delegation for dynamically generated DOM:

  $("body").on("click",'.delete',function(){
   $(this).parent().hide();
});

Working Demo