How to detect element being added/removed from dom element?

html, javascript, jquery

Solution

Use Mutation Observers as suggested by @Qantas in his answer

Following methods are deprecated

You can use DOMNodeInserted and DOMNodeRemoved

$("#parent").on('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

$("#parent").on('DOMNodeRemoved', function(e) {
    console.log(e.target, ' was removed');
});

MDN Docs

Problem

Say I had a `div#parent` and I `append` and `remove` elements to it using jquery. How would I be able to detect when such an event happens on the `div#parent` element?

Original source

Related problems