JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<script src="http://files.the-friend-family.com/log.js"></script>
<button id="remove">Remove</button> <button id="add">Add</button><br><br>
<div id="container">
    <div class="test">Content 1</div>
    <div class="test">Content 2</div>
    <div class="test">Content 3</div>
    <div class="test">Content 4</div>
    <div class="test">Content 5</div>
    <div class="test">Content 6</div>
    <div class="test">Content 7</div>
    <div class="test">Content 8</div>
    <div class="test">Content 9</div>
    <div class="test">Content 10</div>
    <div class="test">Content 11</div>
    <div class="test">Content 12</div>
    <div class="test">Content 13</div>
</div>
<div id="logger">
    <div>Removed Elements Content:</div>
</div>

CSS

#logger {
    margin-top: 50px;
}

JavaScript

log.id = "logger";

jQuery.fn.watchRemove = function(fn, observers) {
    return this.each(function() {
        var o = watchRemove(this, fn);
        if (observers) {
            observers.push(o);
        }
    });
}

$(".test").watchRemove(function() {
    log(this.textContent);
});

$("#remove").click(function() {
    $(".test").eq(0).remove();
});

var cntr = 14;
$("#add").click(function() {
    $(".test").last().after('<div class="test">Content ' + cntr++ + ' (no watcher)</div>');
});


function watchRemove(el, fn) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var item;
            if (mutation.type === "childList" && mutation.removedNodes) {
                for (var i = 0; i < mutation.removedNodes.length; i++) {
                    item = mutation.removedNodes[i];
                    if (item === el) {
                        observer.disconnect();
                        fn.call(item, item);
                        break;
                    }
                }
            }
      });    
    });
    observer.observe(el.parentNode, {childList: true});
    return observer;
}