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();
});
- 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
Reset to default 6The 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();
});