删除元素并使用jQuery将其文本插入到同一位置的父元素中

Question

我正在编写一个脚本来将元素的内容复制到父元素,并删除该元素.元素和父元素具有相同的类.例如:

在脚本运行之前:

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

后:

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

以下是我的代码.内部元素的文本("复制")最终在行尾,而不是"某些"和"文本"之间.我该如何解决？

---

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

<span>您可以使用contents()和unwrap()删除开始和结束标记,而不是完整删除原始文件.

使用这种方法,$.each并且if是不必要的.

$('.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>

Answer 2

请参阅.replaceWith()方法http://api.jquery.com/replacewith/

if ($('.SomeClass > .SomeClass').length > 0) {
  $('.SomeClass > .SomeClass').replaceWith(function() {
    return $(this).text()
  });
}

<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>