JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myTextArea" contenteditable="true">
    <span contenteditable="false">Span A</span>
</div>

<div id="myTextArea2" contenteditable="true">
    <span contenteditable="false">Span B</span>
</div>

CSS

[contenteditable] {
    width: 300px;
    height: 100px;
    border: solid 1px #ccc;
}

input {
    width: 50px;
}

span {
    background-color: tomato;
    color: white;
}

JavaScript

$(function() {
 
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
          //console.log($(mutation.removedNodes)); // <<-- includes text nodes
          
          $(mutation.removedNodes).each(function(value, index) {
              if(this.nodeType === 1) {
                  console.log(this)
              }
          });
      });
    });
    
    var config = { attributes: true, childList: true, characterData: true };
 
    observer.observe($('#myTextArea')[0], config);
    
    observer.observe($('#myTextArea2')[0], config);
});