Wie kann ich Sie entfernen-wrapper - (Eltern-element), ohne zu entfernen das Kind?

Möchte ich entfernen Sie die Eltern-ohne zu entfernen das Kind - ist das möglich?

HTML-Struktur:

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

Nach einem Klick auf den button, den ich gerne haben möchte:

<img src"">
<div class="button">Remove wrapper</div>
Sie verlieren möglicherweise die Ereignis-Listener angehängt, um die Kinder, aber ja, man kann das tun.

InformationsquelleAutor lipenco | 2013-10-09

  1. 9

    Könnte diese API verwenden: http://api.jquery.com/unwrap/

    Demo http://jsfiddle.net/7GrbM/

    .unwrap

    Code sieht etwas auf diese Zeilen:

    Beispielcode

    $('.button').click(function(){
    $('.wrapper img').unwrap();
});
    sollte es $('.img-wrapper').unwrap() ?
    Vielen Dank, fertig! Hinzugefügt demo! :)
    +1 und wenn es mehr Inhalt dann $('.wrapper').children().unwrap();
    Merci Yo! :) Ihre +1 ist anmutig akzeptiert, cheers für mehr Sachen für die OP.

    InformationsquelleAutor Tats_innit

  2. 22

    Reine JS-Lösung, die nicht mit 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);
}

    Versuchen Sie es:

    unwrap(document.querySelector('.wrapper'));
    Das ist genial! Danke!!!!!
    Vielen Dank für diese.
    warum ist die Vermeidung von innerHTML vorzuziehen?
    Beibehaltung der vorhandenen DOM-Objekte (anstatt Neuerstellen Sie der Verwendung von innerHTML) bedeutet, dass die Ereignis-Listener angehängt werden gepflegt.
    Schöne Lösung, aber es gibt keine Notwendigkeit zu entfernen der Kinder aus der Hülle, da docFrag.appendChild(wrapper.firstChild); wird automatisch verschieben Sie einen Knoten von seiner aktuellen position auf eine neue position. Lesen Sie mehr über appendChild auf MDN

    InformationsquelleAutor Web_Designer

  3. 8

    Überrascht, dass niemand die Veröffentlichung der einfachsten Antwort:

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

//Replace the whole wrapper with its own contents
wrapper.outerHTML = wrapper.innerHTML;
    interessant, auch wenn Sie verlieren Hörer

    InformationsquelleAutor ChaseMoskal

  4. 5

    Reine javascript-Lösung, ich bin sicher, jemand kann es vereinfachen mehr, aber dies ist eine alternative für Reine javascript-Jungs.

    HTML

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

    Javascript (rein)

    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

    schauen Sie arbeitet Geige einige Probleme nach dem Auspacken. Fix it .
    habe gerade mit ihm getan.. jetzt buchen
    bearbeitet
    tolle Arbeit +1 .
    +1 Gute Arbeit...

    InformationsquelleAutor Jay Harris

  5. 2

    Reine JS (ES6) Lösung, meiner Meinung nach einfacher zu Lesen als jQuery-Lösungen.

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

    Knoten hat ein ElementNode

    Das ist Brillant.

    InformationsquelleAutor Tom Oeser

  6. 1

    wenn Sie mit jQuery:

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

    InformationsquelleAutor rrrafalsz

  7. -2

    Wenn das wrapper-element text enthält, bleibt mit den untergeordneten Knoten.

    InformationsquelleAutor Filipe Torres

Schreibe einen Kommentar