Question

I have these two functions:

var $mainEdit= $("#main-edit");

    function getSelText()
    {
        var txt = '';
         if (window.getSelection)
        {
            txt = window.getSelection();
                 }
        else if (document.getSelection)
        {
            txt = document.getSelection();
                }
        else if (document.selection)
        {
            txt = document.selection.createRange().text;
                }
        else return;
    return $("#clipboard").val(txt);
    }
    $mainEdit.mouseup(function(){
        $("#clipboard").val("");
          getSelText();  
        }).mousedown(function(){
        $("#clipboard").val("");
          getSelText();
        });

What I want to do, is on the keyup event…the highlighted elements would be removed.

So if I had this html:

<span>a</span>
<span>b</span>
<span>c</span>

and highlighted a and b, on the keyup event, the first two spans would be removed.

Answer 1

Here’s a cross-browser function for deleting selected content:

function deleteSelected() {
    if (window.getSelection()) {
        window.getSelection().deleteFromDocument();
    } else if (document.selection) {
        document.selection.clear();
    }
}

Hooking it up to the keyup event:

$mainEdit.keyup(deleteSelected);