JS - Remove a tag without deleting content

There are several ways to do it. Jquery is the most easy way:

//grab and store inner span html
var content = $('p span').html;
//"Re"set inner p html
$('p').html(content);

Javascript can do the same using element.replace. (I don't remember the regex to do the replace in one stroke, but this is the easy way)

paragraphElement.replace("<span>", "");
paragraphElement.replace("</span>", "");

<p>The weather is sure <span>sunny</span> today</p>;


var span=document.getElementsByTagName('span')[0]; // get the span
var pa=span.parentNode;
while(span.firstChild) pa.insertBefore(span.firstChild, span);

pa.removeChild(span);

jQuery has easier ways:

var spans = $('span');
spans.contents().unwrap();

With different selector methods, it is possible to remove deeply nested spans or just direct children spans of an element.