CODEWITHSUNDEEP
javascriptjqueryimageeventsweb-deployment-project
helpztheme
helpztheme

Reputation: 7

JQuery won't delete my div in response to a div click event

What I'm making

I just learned JQuery and i'm exercising by trying to make a webapp version of Window's Sticky Notes

What I'm trying to do

I have a close-button on the right side, of a top navbar-like div, for each sticky div. I'm trying to make it so that when you click this div, the whole sticky div deletes.

My problem

No response upon clicking the div

My Code

Entire project: https://codepen.io/kymed/pen/ajdmwY

Relevant code:

let closebtnimg = "<img src='x.png' style='float:right;'></img>";
$(closebtnimg).appendTo(this.topdiv);

$(closebtnimg).mousedown(function(){
  $(me.div).remove();
})

What I've tried

I tried creating a div and using the image as a background image, then I tried again while setting the div's opacity to 0 and background color to white.

I also tried this, a chunk of code from a similar post where I replaced "load" with "click"

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Upvotes: 0

Views: 53

Answers (2)

kshetline
kshetline

Reputation: 13734

You need to do this:

let closebtnimg = "<img src='x.png' style='float:right;'></img>";
let closer = $(closebtnimg);
closer.appendTo(this.topdiv);

Then this:

closer.click(function(){
  $(me.div).remove();
})

By using $(closebtnimg) twice as you had been doing, you were creating a totally new close button each time. The second one you created was not attached to your sticky, and you were adding your click action to that unattached close button. The attached close button had no action on it.

Upvotes: 0

fsl
fsl

Reputation: 3280

This is one simple way you could achieve what you want:

$("#myDivId").on('click', function() {
  $("#myDivId").fadeOut()
})

Upvotes: 2

Related Questions