Question

How do I write a JS function to remove the span on click and just retain the inner text ?

    ​<span class="test" onclick="removespan(this);">Data in red</span>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    ​removespan = function(e)​{
                            alert(e.innerText);
                            }​
    CSS : ​span.test{color:red;}

onclick I would like to remove the span and just retain the inner text .
Infact I would like to have a onmodify event …that removes the span .
The purpose is to remove a spellchecker span class in WYSIWYG editor .

Answer 1

If the span is the only child element inside its parent node

<div>
    <span class="test" onclick="removespan(this);">Data in red</span>
</div>


removespan = function(span) {
    span.parentNode.innerHTML = span.innerHTML;
}

Otherwise use this function

removespan = function(span) {
    span.parentNode.replaceChild(document.createTextNode(span.innerHTML), span);
}