How to remove a span in-place?

Question

I have the following input:

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

And I want to achieve the following output:

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

I am using jquery and it has a .unwrap() function, but if I go $('.highlight').unwrap() it removes <p>. :(

Manually hacking the DOM seems like a hassle. Do you know any short solution?

Answer 1

With the use of .contents() you'll get the elements inside of the parent element you want to remove.

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

Answer 2

try replace with

$('.highlight').replaceWith(function() {
    return $(this).html();
});