Question

I am trying to create divs dynamically and display them. When I try to hide the created divs //First function is working perfect, but that is not what I want. I am defining a close button and I want the div to hide when the close button is cliked. While running the //Second function, after clicking the parent div, it hides all its child divs. I.E. When I click on the 1st div it hides all the divs called after that.

Code:

var newImageBoxdiv = $(document.createElement('div')).attr({ class:"demo"+i, id:"image"});
newImageBoxdiv.html("<img id='MyImage' src='"+d+"'><div class='ImageWindowCloseButton' ></div>");
newImageBoxdiv.insertAfter('.demo');

$('#image').show(); 
i++;

 //First Function
 $('#image').click(function(event){  //Works Perfect

  $(newImageBoxdiv).hide();
  event.stopPropagation();
  event.cancelBubble = true;

 });

 //Second function
 $('.ImageWindowCloseButton').click(function(event){ // Deletes Child element when clicked on parent

  $(newImageBoxdiv).hide();
  event.stopPropagation();
  event.cancelBubble = true;

 });

Answer 1

$(this).parent(newImageBoxdiv).hide();