JSFiddle - React, Tailwind, and code Playground

by Nick Grealy

HTML

<div id="content" contenteditable="true"> Here are <span class="words" id="some">some</span> words </div>

CSS

.words { color: red;}

JavaScript

//$('.words').hover(function() { $(this).remove(); });
$('.words').click(function() { $(this).remove(); });
//$('.words').on(function() { $(this).remove(); });
//$('.words').onkeypress(function() { $(this).remove(); });
//$('.words').bind("keydown", function(e) { $(this).remove() });
var words = $('.words')[0]

$('#content').keyup(function(){    
    if (words == getSelectionStart()){
        $(words).remove()   
    }
})


function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}