Как удалить оболочку (родительский элемент) без удаления дочернего элемента?

Ответ 1

Можно использовать этот API: http://api.jquery.com/unwrap/

Демо http://jsfiddle.net/7GrbM/

.unwrap

Код будет выглядеть примерно так:

Пример кода

$('.button').click(function(){
    $('.wrapper img').unwrap();
});

Ответ 2

Чистое решение JS, которое не использует innerHTML:

function unwrap(wrapper) {
    // place childNodes in document fragment
    var docFrag = document.createDocumentFragment();
    while (wrapper.firstChild) {
        var child = wrapper.removeChild(wrapper.firstChild);
        docFrag.appendChild(child);
    }

    // replace wrapper with document fragment
    wrapper.parentNode.replaceChild(docFrag, wrapper);
}

Попробуйте:

unwrap(document.querySelector('.wrapper'));

Ответ 3

Удивлен, что никто не опубликовал простейший ответ:

// Find your wrapper HTMLElement
var wrapper = document.querySelector('.wrapper');

// Replace the whole wrapper with its own contents
wrapper.outerHTML = wrapper.innerHTML;

Ответ 4

Решение Pure JS (ES6), на мой взгляд, легче читать, чем jQuery-решения.

function unwrap(node) {
    node.replaceWith(...node.childNodes);
}

node должен быть ElementNode

Ответ 5

Чистое решение для javascript, я уверен, что кто-то может упростить его, но это альтернатива для чистых javascript-парней.

HTML

<div class="button" onclick="unwrap(this)">Remove wrapper</div>

Javascript (чистый)

function unwrap(i) {
    var wrapper = i.parentNode.getElementsByClassName('wrapper')[0];
    // return if wrapper already been unwrapped
    if (typeof wrapper === 'undefined') return false;
    // remmove the wrapper from img
    i.parentNode.innerHTML = wrapper.innerHTML + i.outerHTML;
    return true;
}

JSFIDDLE

Ответ 6

если вы используете jQuery:

$(".wrapper").replaceWith($(".wrapper").html());

Ответ 7

В настоящее время это проще:

function unwrap (node: Element) {
  node.after(...Array.from(node.childNodes))
  node.remove()
}

Ответ 8

Если элемент оболочки содержит текст, текст остается с дочерними узлами.