Question

I’m trying to do something similar/same as in this question:
How to remove only the parent element and not its child elements in JavaScript?

<div>
    This is some text here
    <h2>This is more text</h2>
</div>

All I want is to remove the H2 tag. The result should be:

<div>
    This is some text here
    This is more text
</div>

Assume that I have the H2 element already:

if (parentElement.nodeName.toLowerCase() == "h2") {
    //now what? I basically want to this: $.replaceWith(parentElement.innerText)
    //just without jQuery
}

Answer 1

Assuming the variable h2 accurately references the h2 element you want to act upon, my first thoughts would be:

var h2 = document.getElementsByTagName('h2')[0],
    textnode = h2.firstChild;

h2.parentNode.insertBefore(textnode,h2.nextSibling);
h2.parentNode.removeChild(h2);​

JS Fiddle demo.

To make it slightly more DRY, a function approach could be:

function unwrapH2(el) {
    if (!el) {
        return false;
    }
    else {
        var textnode = el.firstChild,
            elParent = el.parentNode;

        elParent.insertBefore(textnode, h2.nextSibling);
        elParent.removeChild(h2);
    }
}

var h2 = document.getElementsByTagName('h2')[0];

unwrapH2(h2);

JS Fiddle demo.

Adjusted the above in response to Felix Kling’s comments (below), and also to use replaceChild():

function unwrapH2(el) {
    if (!el) {
        return false;
    }
    else {
        var textnode = el.firstChild,
            elParent = el.parentNode;
        elParent.replaceChild(textnode,el);
    }
}

var h2 = document.getElementsByTagName('h2')[0];

unwrapH2(h2);

JS Fiddle demo.