javascript - How can I remove wrapper (parent element) without removing the child?

Question

I would like to remove the parent without removing the child - is this possible?

HTML structure:

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

After clicking on the button I would like to have:

<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

この API を使用できます: http://api.jquery.com/unwrap/

デモ http://jsfiddle.net/7GrbM/

.unwrap

コードは次の行に表示されます。

サンプルコード

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

Answer 3

純粋な 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 4

ラッパー要素にテキストが含まれている場合、テキストは子ノードに残ります。