web-dev-qa-db-ja.com

子を削除せずにラッパー（親要素）を削除するにはどうすればよいですか？

子を削除せずに親を削除したいのですが、これは可能ですか？

HTML構造：

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

ボタンをクリックした後、私は欲しいです：

<img src"">
<div class="button">Remove wrapper</div>
javascriptjqueryhtmldomdom-manipulation
15
lipenco

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

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

.unwrap

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

サンプルコード

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

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

誰も最も簡単な答えを投稿していないことに驚いた：

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

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

純粋なJS（ES6）ソリューション、私の意見では、jQueryソリューションよりも読みやすいです。

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

ノードはElementNodeである必要があります

9
Tom Oeser

純粋な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 [〜＃〜]

5
Jay Harris

jQueryを使用している場合：

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

今日ではもっと簡単です：

function unwrap (node: Element) {
  node.after(...Array.from(node.childNodes))
  node.remove()
}
0
Brian M. Hunt