What is the proper way of binding REMOVE event listener to dynamically created elements in JQuery

Question

My goal is to perform a certain operation each time an element with a certain id or class is deleted from DOM. Prior to this, I've been successfully using a standard syntax for binding click events on dynamically created elements like this:

$(document).on('click', '.someClass', function(e) {
    alert("Div was clicked");
  });

Inspired by this post, I tried to do the same thing for REMOVE event listener, and failed. Here is my jsFiddle.

Any hints on how to make this work? And maybe what I am trying to do is fundamentally wrong, and I should come up with some entirely different logic ?

http://jsfiddle.net/wphtjw1o/

Note, in the linked post it says you need to load _jQuery UI_ as well — Asons, May 13 '18 at 10:00
Check this post too: https://stackoverflow.com/questions/18410050/jquery-remove-method-doesnt-trigger-onremove-event — Asons, May 13 '18 at 10:09

Ihor Lavs · Answer 1 · 2018-05-13T10:33:44.210

0

This is the functionality of Jquery UI script, so you have to include two scripts Jquery and Jquery UI to make it work.

$(function() {
  $('<div id="DivToBeRemoved">DIV TO BE REMOVED</div>').prependTo('body');
  $("#DivToBeRemoved").on("remove", function () {
        alert("Element was removed");
    });

  $(document).on('click', '#DivToBeRemoved', function(e) {
    alert("Div was clicked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

   
<button onclick="RemoveDiv();">Click here to remove div above</button>
<script type="text/javascript">
  function RemoveDiv() {
    var d = $("#DivToBeRemoved");
    d.remove();
  }

</script>

edited May 13 '18 at 10:33

answered May 13 '18 at 10:05

Ihor Lavs

2,315
2
15
26

And where is a sample of OP's code showing this actually works? – Asons May 13 '18 at 10:07
I really tried to include the UI library as well, and still it doesn't work. So I should really appreciate a working code – Edgar Navasardyan May 13 '18 at 10:10
Ihor, thanks for the answer. Yet, I've mentioned that the core detail here is that the elements are DYNAMICALLY added. So your code should work for static elements only. – Edgar Navasardyan May 13 '18 at 10:18
Edgar, as you can see, I generate the element with jQuery now, and it works fine. – Ihor Lavs May 13 '18 at 10:35

Mehdi Dehghani · Answer 2 · 2018-05-13T10:34:17.763

0

If I got you correctly, you trying to write custom event (remove event in your case).

For calling custom event you don't need any library, you need to trigger that event, like so:

function RemoveDiv() {
    var d = $("#DivToBeRemoved");

    // d.remove();
    d.trigger('remove'); // <--
}

What is the proper way of binding REMOVE event listener to dynamically created elements in JQuery

2 Answers2