javascript - 如何在不删除子元素的情况下删除包装器（父元素）？

Question

我想在不删除孩子的情况下删除父母 - 这可能吗？

HTML结构：

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

单击按钮后，我想要：

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

Answer 1

纯 JS ( ES2015 ) 解决方案，在我看来比 jQuery 解决方案更容易阅读。

node.replaceWith(...node.childNodes)

Node 必须是ElementNode

const wrapperNode = document.querySelector('h1')
wrapperNode.replaceWith(...wrapperNode.childNodes)

<h1>
  <a>1</a>
  <b>2</b>
  <em>3</em>
</h1>

Answer 2

不使用 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 3

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

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

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

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

Answer 6

如果您使用的是 jQuery：

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

Answer 7

如果 wrapper 元素包含文本，则该文本保留有子节点。