Как удалить только родительский элемент, а не его дочерние элементы в JavaScript?

Question

Допустим,

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

к этому:

<div>
  pre text
  <p>child foo</p>
  <p>child bar</p>
  nested text
  post text
</div>

Я выяснил, используя Mootools, jQuery и даже (необработанный) JavaScript, но не смог понять, как это сделать.

Answer 1

Я искал лучший ответ с точки зрения производительности во время работы над важным DOM.

Ответ без век указывал на то, что с использованием javascript лучше всего будут выступать.

Я сделал следующие тесты времени выполнения на 5000 строк и 400 000 символов со сложной композицией DOM внутри раздела для удаления. Я использую идентификатор вместо класса по удобной причине при использовании JavaScript.

Использование $ .unwrap ()

$('#remove-just-this').contents().unwrap();

201.237ms

Использование $ .replaceWith ()

var cnt = $("#remove-just-this").contents();
$("#remove-just-this").replaceWith(cnt);

156.983ms

Использование DocumentFragment в javascript

var element = document.getElementById('remove-just-this');
var fragment = document.createDocumentFragment();
while(element.firstChild) {
    fragment.appendChild(element.firstChild);
}
element.parentNode.replaceChild(fragment, element);

147.211ms

Заключение

С точки зрения производительности, даже при относительно большой структуре DOM, разница между использованием jQuery и javascript невелика. Удивительно, но $.unwrap() дороже, чем $.replaceWith(). Тесты выполнены с помощью jQuery 1.12.4.

Answer 2

если вы хотите сделать то же самое в пижаме, вот как это делается. это прекрасно работает (спасибо веко). Благодаря этому я смог создать правильный текстовый редактор, который бы правильно создавал стили, не мешая.

def remove_node(doc, element):
    """ removes a specific node, adding its children in its place
    """
    fragment = doc.createDocumentFragment()
    while element.firstChild:
        fragment.appendChild(element.firstChild)

    parent = element.parentNode
    parent.insertBefore(fragment, element)
    parent.removeChild(element)