Удалите элемент и вставьте его текст в родительский элемент в том же месте с помощью jQuery

Я пишу script, чтобы скопировать содержимое элемента в родительский элемент и удалить элемент. Элемент и родительский элемент имеют один и тот же класс. Например:

Перед запуском script:

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

Ответ 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>

Ответ 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>

Ответ 3

Попробуйте jQuery replaceWith

var a = $('.SomeClass > .SomeClass');

a.replaceWith(a.text());

replaceWith заменит каждый элемент в наборе согласованных элементов предоставленным новым контентом и вернет набор удаленных элементов

ПРИМЕР FIDDLE

Ответ 4

Все эти ответы используют jQuery. Здесь один с только родным JS. Используйте

parent.innerHTML = parent.innerHTML.replace(child.outerHTML, child.innerHTML);

Вот полностью функциональный рекурсивный пример, который отфильтровывает повторяющиеся классы в дочернем элементе.

/**
 * @function mergeHierarchy
 * @param {HTMLElement} parent - The root element to start merging under
 * @return {undefined}
 */
function mergeHierarchy(parent) {
  var parentClasses = parent.className.split(' ');
  parentClasses.sort(); // for comparing
  
  // only merge hierarchy if parent has any children
  if (parent.children.length == 0) return;
  
  // iterate over children
  for (var i=0; i<parent.children.length; i++) {
    var child = parent.children[i];
    // recurse if child has children
    if (child.children.length > 0) mergeHierarchy(child);
 
    var childClasses = child.className.split(' ');
    childClasses.sort();  // for comparing
    // if parent classes differ from child classes, then move onto the next child (after removing any duplicated classes)
    if (childClasses.length != parentClasses.length || !childClasses.every(function(item,i) { return item === parentClasses[i];} )) {
      // remove duplicate classes from child (if any)
      for (var c=0; c<childClasses.length; c++) {
        if (parentClasses.indexOf(childClasses[c]) > -1) childClasses.splice(c, 1);
      }
      child.className = childClasses.join(' ');
      continue;
    }
    // remove child from DOM and insert innerHTML into parentf
    parent.innerHTML = parent.innerHTML.replace(child.outerHTML, child.innerHTML);
  }
}

mergeHierarchy(document.querySelector('.SomeClass'));
console.log(document.querySelector('.SomeClass').innerHTML);

.SomeClass {
  color: red;
}
.SomeOtherClass {
  font-family: monospace;
}

<span class='SomeClass'>  
    Some
    <span class='SomeClass'>
        Copied
        <div class='SomeClass SomeOtherClass'>
          (Moved) 
        </div>
    </span>
    Text
</span>

Ответ 5

просто измените метод html(), который вернет код HTML, используйте text(), который в основном вернет аналогичный элементу element.innerText в Vanilla

if ($('.SomeClass > .SomeClass').length > 0) {
  $('.SomeClass > .SomeClass').each(function(index, event) {
    //$(this).parent().append($(this).html());
    $(this).parent().append($(this).text());
    $(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>