Opposite of a function that surrounds selection with span

Question

Hey Guys I got a function like this:

  define(function () {
  'use strict';
  var sel, range, span;
  return function () {
    span = document.createElement("span");
    span.className = 'highlight';

    if (window.getSelection) {
      sel = window.getSelection();
      if (sel.rangeCount) {
        range = sel.getRangeAt(0).cloneRange();
        range.surroundContents(span);
        sel.removeAllRanges();
        sel.addRange(range);
       }
     }
   };
 });

It bascially surrounds my selection with a span. I would like to have an opposite of this method removes the span from the selected text. For example

I have a div:

<div>some text in here</div>

Lets say I applied the above on the word "here" of above:

<div>some text in <span class="highlight">here</span></div>

I would like to have a method that removed the span from the word if I have it highlighted again.

Answer 1

As you have tagged jQuery. You can simply use combination of .contents() and .unwrap()

$('.highlight').contents().unwrap()

DEMO