jQuery unwrap funktioniert nicht

Question

Ich versuche zu verwenden, um ein Elternelement zu entfernen. Ich befolge die Dokumentation und es funktioniert nicht. Ich habe Html So: Test html

und ich schrieb diese Funktion zu klonen und auspacken es:

var htmlTemplate = $('#htmlTemplate').clone().removeAttr('id').unwrap(); 

Wenn ich diesen Code ausführen die Vorlage noch die äußere Spannweite auf sie. Kann jemand dieses richtig auspacken?

Answer 1

ein Element auspacken sollte ein Elternteil haben. Sie erstellen ein DOM-Fragment und versuchen, es auszupacken. Aber es hat keine Eltern.

Sag mal, gibt es einige dom:

<button>unwrap</button> 
<div class="outer"></div> 

Mit dem Elternteil anstelle Unwraping geht ganz gut:

var inner = '<span class="inner">test html</span>', 
     $outer = $('.outer'); 

// First you would want your element to get a parent. 
$outer.html(inner); 


// Then unwrap it 
$('button').on('click', function() { 
    $('.inner').unwrap(); 
}); 

hier ist der fiddle

Also, wenn Sie die äußere entfernen möchten Spannweite, sollten Sie die innere zielen und es wird auspacken.

Für das aktualisierte Fragment: .Clone() kopiert keine Eltern, es kopiert nur das Element und alle seine Nachkommen. Wenn Sie also clone verwenden, erstellen Sie am ausgewählten Element ein separates Fragment mit root.

.unwrap() entfernt die übergeordneten Elemente der übereinstimmenden Elemente. Um die innere Spanne auszupacken, müssen Sie sie mit jQuery auswählen.

<div class="outer"></div> 

js

var html = "<span><span class='inner'>test html </span></span>"; 

var $html = $(html); 

var unwraped = $html.find('.inner').unwrap(); 

$('.outer').html(unwraped); 

anderen fiddle

Upd:

Es Unterschied ist das DOM zwischen überquert und es ändern. Wenn Sie .find() verwenden, durchlaufen Sie (von Element zu Element wechselnd). Die Struktur des DOM-Baums bleibt gleich. Wenn Sie .unwrap() verwenden, ändern Sie die Struktur (Entfernen eines Elements aus dem DOM).

Answer 2

Versuchen Sie, unwrap wie unten

var html = "<span><span>test html</span></span>" 
html = $(html).unwrap(); 
$(html).unwrap(); 

Answer 3

Die Methode .unwrap() entfernt das übergeordnete Element des Elements.

So zu sagen, span muss ein Element sein.

var gameOfThronesChars = $('p'); // Create an element. 
 

 
$("button").click(function() { 
 
    if (gameOfThronesChars.parent().is("div")) { 
 
    gameOfThronesChars.unwrap(); 
 
    } else { 
 
    gameOfThronesChars.wrap("<div></div>"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 

 
<style type="text/css"> 
 
    div { 
 
    border: 2px solid #c00; 
 
    } 
 
</style> 
 

 
<button>Wrap/Unwrap</button> 
 

 
<p>Tyrion Lannister</p> 
 
<p>Cersei Lannister</p> 
 
<p>Sansa Stark</p> 
 
<p>Arya Stark</p>

Answer 4

Abwickelwerkzeug arbeitet nicht für die Zeichenfolge für DOM-Elementen.

Die Methode .unwrap() entfernt das Elternelement des Elements. Dies ist die Umkehrung der .wrap() - Methode. Die übereinstimmenden Elemente (und ggf. ihre Geschwister) ersetzen ihre Eltern innerhalb der DOM-Struktur.

Für weitere Informationen: https://api.jquery.com/unwrap/

var html = $('span'); 
 
html.unwrap('span');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<p id="html"> 
 
    <span><span>test html </span></span> 
 
<p>