Question: I've got the following code:

```
<div contenteditable="true" id="editor">
    <p>This is example text with <span class="spoiler">spoiler<strong>s</strong></span></p>
  <p>The <span class="spoiler">spoiler</span> exists in multiple paragraphs</p>
</div>
<button onclick="removeSpoiler();">remove spoiler</button>

```

The user can select text and after that click on the button to remove the `<span class="spoiler">` formatting. After clicking the button, the text must be still selected.

For example: The user selects "with spoilers. The sp". He clicks on 'remove spoiler'. The desired output is:

```
<div contenteditable="true" id="editor">
    <p>This is example text with spoiler<strong>s</strong></p>
  <p>The sp<span class="spoiler">oiler</span> exists in multiple paragraphs</p>
</div>
<button onclick="removeSpoiler();">remove spoiler</button>

```

A jsFiddle of my attempt (I really don't know where to go from there): <http://jsfiddle.net/632cr/>

Answer: 
The fastest and easiest way to do this is to use [rangy](https://code.google.com/p/rangy/) framework and its [CSSClassApplier](https://code.google.com/p/rangy/wiki/CSSClassApplierModule) module.

It's easy and your code could look like this:

```
rangy.init();

var cssClassApplierModule = rangy.modules.CssClassApplier;
var classApplier = rangy.createCssClassApplier('spoiler');

function removeSpoiler(){
    classApplier.undoToSelection(editor);

    // it's some preview div
    $('#preview').text( $(editor).html() );
}

```

See the result demo [here](http://jsbin.com/oHUZAViB/1/).
Not sure what you are after here, but:

```
function removeSpoiler()
{
    var e=document.getElementsByClassName("spoiler");

    for(var n=0;n<e.length;n++)
        e[n].style.display="none";
}

```

will hide the spoiler spans when the button is clicked.