Come rimuovere tutto all'interno di un DIV ad eccezione di un elemento?

Question

Ho il seguente codice HTML:

<div class="item"> 
    <img src="http://mintywhite.com/images/wg/0904/05rssfeedicons/rss-feed-icons11.jpg"/> 
    TEXT NODE 
    <span class="some_class">What the funk?</span> 
    <form>What the monkey</form> 
</div> 

Voglio rimuovere tutto all'interno div.item tranne che per l'immagine. Ho provato a utilizzare questo bit di codice, ma il nodo di testo rimane ancora all'interno di div.

$('.item').contents().not('img').remove(); 

Qualche suggerimento?

Ecco la mia JSFiddle che si può giocherellare con: http://jsfiddle.net/pSmDW/

Answer 1

Prova questo: $('.item').contents(':not(img)').remove();

Answer 2

var itm = $('.item'); 
var img = itm.children('img'); 
itm.empty().append(img); 

http://jsfiddle.net/pSmDW/2/

---

Se ci sono dati o gestori sull'immagine, possiamo usare .detach().

var itm = $('.item'); 
var img = itm.children('img').detach(); 
itm.empty().append(img); 

http://jsfiddle.net/pSmDW/3/

---

Se ci sono molti di questi, ti consigliamo di utilizzare .each().

$('.item').each(function() { 
    var img = $(this).children('img').detach(); 
    $(this).empty().append(img); 
}); 

http://jsfiddle.net/pSmDW/4/

Answer 3

Il nodo di testo deve essere avvolto in un tag html come campata. Ho provato questo con il JSFiddle che hai fornito e non ho avuto problemi. http://jsfiddle.net/pSmDW/1/

Buona fortuna! Tom

<div class="item"> 
    <img src="http://mintywhite.com/images/wg/0904/05rssfeedicons/rss-feed-icons11.jpg"/> 
    **<span>TEXT NODE</span>** 
    <span class="some_class">What the funk?</span> 
    <form>What the monkey</form> 
</div> 

Answer 4

Per jQuery v1.9.1 e sotto il seguente funzionerà:

$('.item').contents(':not("img")').remove(); 

Questo cercherà tutti gli elementi (compresi i nodi di testo) che aren' t immagini e rimuoverle.

$(document).ready(function() { 
 
    $('.item').contents(':not("img")').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    <img src="https://via.placeholder.com/350x150"/> 
 
    TEXT NODE 
 
    <span class="some_class">What the funk?</span> 
 
    <form>What the monkey</form> 
 
</div>

Per jQuery> 1.9.1 c'è un problema quando si utilizza .contents() con :not(). Per ovviare al problema, è possibile ritirare l'immagine, quindi sostituire l'elemento .html() con l'immagine.

$(document).ready(function() { 
 
    var imgNode = $('.item').find('img'); 
 
    $('.item').html(imgNode); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    <img src="https://via.placeholder.com/350x150"/> 
 
    TEXT NODE 
 
    <span class="some_class">What the funk?</span> 
 
    <form>What the monkey</form> 
 
</div>