remove parent without removing childs in vanilla javascript

Question

I've read this question to remove parent without remove childs, but it don't work if the child node is a node type 3 (text)

<div>
    <h1>
        <u>
            Hello world
            <i> How are you ? </i>
        </u>
    </h1>
</div>

For example, I want to remove <u> tag (parent of Hello world node type text and i) using vanilla javascript.

After removing u tag I would like to have:

<div>
    <h1>
        Hello world
        <i> How are you ? </i>
    </h1>
</div>

So... `element.parentNode.outerHTML = element.parentNode.innerHTML`? Or do you need to preserve all the JS event bindings etc. as well? (in which case, please [refine your question](/help/how-to-ask)) — Mike 'Pomax' Kamermans, Feb 06 '20 at 19:47
I would recommend rather element.parentElement.outerHTML then parentNode. For more info go here: https://stackoverflow.com/questions/8685739/difference-between-dom-parentnode-and-parentelement but basically it's safer option. — Mortimer, Feb 06 '20 at 19:57

score 0 · Answer 1 · answered Feb 06 '20 at 20:03

0

The answer is short

Using the https://stackoverflow.com/users/7230746/tom-oeser answer in this question redefining the logic taken text node parent first.

function unwrap(node) {
    node = node.parentNode;
    node.replaceWith(...node.childNodes);
}

answered Feb 06 '20 at 20:03

jjoselon

1 Answers1