How do I remove HTML in a content editable div if it is under a cursor position?

Question

I'm trying to remove the class .words from this HTML, whenever it's clicked on it or if a keypress happens over it.

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

I've tried

$('.words').click(function() { $(this).remove(); });

and more, which work except when I click on another word and cycle over .words using left or right key (since it is content editable). I'd like it to be removed as soon as the the cursor is over the class. Thanks.

I think this question has been answered before? http://stackoverflow.com/questions/1197401/how-can-i-get-the-element-the-caret-is-in-with-javascript-when-using-contentedi — Nick Grealy, Feb 13 '14 at 23:01

score 2 · Accepted Answer · answered Feb 13 '14 at 23:05

Something like this?

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);
}

Example: http://jsfiddle.net/nickg1/ttMJW/1/

How do I remove HTML in a content editable div if it is under a cursor position?

1 Answers1