如何在不删除子项的情况下删除包装器(父元素)？

Question

我想删除父母而不删除孩子 - 这可能吗？

HTML结构:

<div class="wrapper">
  <img src"">
</div>
<div class="button">Remove wrapper</div>

点击我想要的按钮后:

<img src"">
<div class="button">Remove wrapper</div>

Answer 1

不使用innerHTML的纯JS解决方案:

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'));

Answer 2

很惊讶没有人发布最简单的答案:

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

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

Answer 3

我认为，纯JS（ES6）解决方案比jQuery解决方案更易于阅读。

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

节点必须是ElementNode

Answer 4

可以使用此API:http://api.jquery.com/unwrap/

演示 http://jsfiddle.net/7GrbM/

.unwrap

代码将在这些方面看起来像:

示例代码

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

Answer 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