Dont understand why .remove() not working

Question

Hi I am learning jQuery and I do not understand why this fucntion does not work. When I click the button it should remove the div but it does not.

The remove function

$(".editButton").click(function () {
    $(".editButton").remove();
});

Function that creates the div

var formatPost = function (d) {
    var s = '';
    s = '<div class="post" data-id="' + d.id + '"><h2 class="postHeading">' + d.title + '</h2>';
    s += d.body;
    s += '<p> Posted on: ' + d.date + '</p>';
    s += '<div class="btn editButton">Edit Post</div>'
    s += '</div>'
    return s;
};

tried `alert()` or `console.log();` to see if the `click` is actually working? — Tahir Ahmed, Jun 01 '15 at 07:20

Satpal · Answer 1 · 2015-06-01T07:30:43.533

3

Currently you are using direct binding, this works when the element exist on the page at the time your code makes the event binding call.

You need to use Event Delegation using .on() delegated-events approach.

i.e.

$(document).on('event','selector',callback_function)

Use,

If you want to remove only button

$(document).on('click', '.editButton', function () {
    $(this).remove(); 
});

If you want to remove complete post, First, You need to execute the action in current element context so use this. Then use closest() to find post parent and then use .remove()

$(document).on('click', '.editButton', function () {
    $(this).closest('.post').remove(); 
});

edited Jun 01 '15 at 07:30

answered Jun 01 '15 at 07:21

Satpal

132,252
13
159
168

It works even without the closest() but thank you for the detailed explenation. Much better then to just copy code. – Pavel Kašelják Jun 01 '15 at 07:26
@PavelKašelják, `$(this).remove();` will only remove the `editButton` div, not complete post – Satpal Jun 01 '15 at 07:29
Yes thats what I wanted...as I said I am experimenting with jQuery and learning it right now :) – Pavel Kašelják Jun 01 '15 at 07:32

Sudharsan S · Answer 2 · 2015-06-01T07:23:23.163

1

Use Event Delegation.

You added the edit button dynamically. DOM didn't know when was the element is added so we need to traverse from the document or the body or Immediate parent selector to find the element

$(document).on('click', '.editButton', function () {
    $(this).remove();
});

edited Jun 01 '15 at 07:23

answered Jun 01 '15 at 07:20

Sudharsan S

15,336
3
31
49

Yes this has worked. Thank you. – Pavel Kašelják Jun 01 '15 at 07:22

score 1 · Answer 3 · answered Jun 01 '15 at 07:21

1

Since you are dynamically creating div, use event delegation

$(document).on('click', '.editButton', function () {
    $(this).remove();
});

answered Jun 01 '15 at 07:21

Zee

8,420
5
36
58

@Pavel Kašelják - If you happy with my answer means please accept my answer – Sudharsan S Jun 01 '15 at 08:11

Dont understand why .remove() not working

3 Answers3