Question

I need to replace

<span class='foo'>bar</span> 

with

bar

using JavaScript / jQuery.

Note: tag content must be inserted exactly in the same place, where tag was.

Answer 1

One plain JavaScript approach is the following:

function textUnwrap(el) {
    if (!el) {
        return false;
    }
    else {
        var text = el.textContent || el.innerText,
            textnode = document.createTextNode(text);
        el.parentNode.insertBefore(textnode, el.nextSibling);
        el.parentNode.removeChild(el);
    }
}

var spans = document.getElementsByTagName('span');

for (var i=0, len=spans.length; i<len; i++){
    if (spans[i].className.indexOf('foo') !== -1) {
        textUnwrap(spans[i]);
    }
}

JS Fiddle demo.

Edited the function in order to cache the el.parentNode (since I’m using it twice):

function textUnwrap(el) {
    if (!el) {
        return false;
    }
    else {
        var text = el.textContent || el.innerText,
            textnode = document.createTextNode(text),
            parent = el.parentNode;
        parent.insertBefore(textnode, el.nextSibling);
        parent.removeChild(el);
    }
}

JS Fiddle demo.

Also, again an update to the function, to use replaceChild() rather than insertBefore() and removeChild():

function textUnwrap(el) {
    if (!el) {
        return false;
    }
    else {
        var text = el.textContent || el.innerText,
            textnode = document.createTextNode(text),
            parent = el.parentNode;
        parent.replaceChild(textnode, el);
    }
}

JS Fiddle demo.