Remove element and insert its text into parent element in the same place with jQuery

Question

I am writing a script to copy the content of an element to the parent element, and delete the element. The element and the parent element have the same class. For example:

Before the script runs:

<span class='SomeClass'>  
    Some
    <span class='SomeClass'>
        Copied
    </span>
    Text
</span>  

After:

<span class='SomeClass'>  
    SomeCopiedText
</span>

Below is my code. The text of element which is inside ("Copied") ends up on the end of line, not between "Some" and "Text". How can I fix it?

---

if ($('.SomeClass > .SomeClass').length > 0) {
  $('.SomeClass > .SomeClass').each(function(index, event) {
    $(this).parent().append($(this).html());
    $(this).remove();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="SomeClass">
  Some
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>

Answer 1

Instead of removing the original <span> in its entirety, you can use contents() and unwrap() to strip the opening and closing tags.

Using this method, the $.each and if are unnecessary.

$('.SomeClass > .SomeClass').contents().unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="SomeClass">
  Some
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>

<br><br>

<span class="SomeClass">
  Another
  <span class="SomeClass">
    Copied
  </span>
  Text
</span>