javascript jquery tree mutation-observers

How can I get the old parent of a MutationObserver's removedNode, before it was removed?

I've put together an example where I'm colouring leaf nodes red and branches blue in a dynamically changing DOM. To handle node removal I keep track of a children count on each node. When it reaches zero, that node becomes a leaf node. The problem is I need to decrement the count of all ancestors for each removed node. The MutationObserver seems to give a removal event after the node has been removed from the DOM and so it has no parent. Is there any way I can still get the original parent just before removal?

In my application I'm applying filters to certain nodes and don't want to filter twice by having both a parent and a child node with a filter. I'm using the above approach handle a dynamic DOM. It is also a browser extension and needs to handle arbitrary content as cheaply and unobtrusively as possible.

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    $(mutation.addedNodes).find('*').addBack().each(function(i, node) {
      //all added nodes come through here
      if ($(node).data('count')) {
        //a child has already been processed so must be a branch
        $(node).addClass('branch');
      } else {
        //set ancestors as .branch and increment their count
        $(node).parents('div').each(function() {
          $(this).removeClass('leaf').addClass('branch');
          $(this).data('count', ($(this).data('count') || 0) + 1);
        });
        
        //no children have been processed so must be a leaf
        $(this).addClass('leaf');
      }
    });
    $(mutation.removedNodes).find('*').addBack().each(function(i, node) {
      //FIXME: parentNode is null
      console.log(node, node.parentNode);
      
      //decrement ancestor counts and set as leaf if zero
      $(node).parents().each(function() {
        $(this).data('count', $(this).data('count') - 1);
        if ($(this).data('count') == 0)
          $(this).removeData('count').removeClass('branch').addClass('leaf');
      });

    });
  });
});

observer.observe(document, {
  subtree: true,
  childList: true
});

//for debugging counts
$(document).on("mouseenter", "div", function() {
  $(this).attr('title', $(this).data('count'));
});

$(document.body).append('<div>');

//add some divs
window.setTimeout(function() {
  $('div').eq(0).append('<div><div></div></div>');
  $('div').eq(0).append('<div>');
}, 500);

//remove divs
window.setTimeout(function() {
  $('div').eq(2).remove();
}, 1000);

div {
  min-height: 60px;
  border: 1px solid black;
  margin: 10px;
  background-color: white;
}
.branch {
  background-color: #a3aff5;
}
.leaf {
  background-color: #f5a3a3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Solution

You can use the MutationRecord.target property like

var id = 0;
$('div').click(function(e) {
  $(this).remove();
  e.stopPropagation();
}).attr('id', function() {
  return 'div-' + ++id
});

var observer = new MutationObserver(function(mutations) {

  mutations.forEach(function(mutation) {
    if (mutation.removedNodes.length) {
      console.log('mutation', mutation, mutation.target.id);
      snippet.log('deleted from node: ' + mutation.target.tagName + '[' + (mutation.target.id || '') + ']')
    }
  });

});

observer.observe(document, {
  subtree: true,
  childList: true
});

div {
  padding: 10px;
  border: 1px solid grey;
  margin-bottom: 5px;
}
div:last-child {
  margin-bottom: 0;
}

<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="ct">
  <div></div>
  <div></div>
  <div></div>
  <div>
    <div></div>
    <div></div>
  </div>
</section>