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

Question

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

setting `var me = this` is the first thing i see wrong. you should not do that as `this` is scoped differently pretty much everywhere that it is used. see the Mozilla developer docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this Just use `this` each time like you have done in most places instead of trying to assign it to something at the beginning of your script — Devon Kiss, Jul 15 '18 at 06:31
@toughskin i had a bug at one point that fixed that. I think its refering to object or variable from inside an event function, inside an event function. (Which i did with the sticky note dragging) — helpztheme, Jul 15 '18 at 06:39

score 2 · Answer 1 · answered Jul 15 '18 at 06:40

2

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

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

answered Jul 15 '18 at 06:40

fsl

3,250
1
10
20

score 0 · Accepted Answer · answered Jul 15 '18 at 06:43

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.

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

2 Answers2