javascript - How to remove a span in-place? -

i have following input:

<p>   <span class="highlight">     text <b>that can have formatted components too</b>.   </span>   , more text here of course. </p> 

and want achieve following output:

<p>     text <b>that can have formatted components too</b>.     , more text here of course. </p> 

i using jquery , has .unwrap() function, if go $('.highlight').unwrap() removes <p>. :(

manually hacking dom seems hassle. know short solution?

with use of .contents() you'll elements inside of parent element want remove.

$(".highlight").contents().unwrap();