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();
});

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();
});

• javascript
• jquery

• 2 delegation is the keyword you are looking for – A. Wolff Commented Mar 5, 2014 at 11:14
• And you can be selective too: $(this).closest(".image").hide() – mplungjan Commented Jul 20, 2018 at 14:37

3 Answers 3

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

You need event delegation for dynamically generated DOM:

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

Working Demo

you should use deligates for dynamically created items

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