Jak usunąć wszystko z DIV, z wyjątkiem jednego elementu?

Question

Mam następujące 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> 

Chcę usunąć wszystko, co w div.item wyjątkiem obrazu. Próbowałem użyć tego fragmentu kodu, ale węzeł tekstowy nadal pozostaje w zakresie div.

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

Wszelkie sugestie?

Oto mój JSFiddle, że można bawić się z: http://jsfiddle.net/pSmDW/

Answer 1

Spróbuj tego: $('.item').contents(':not(img)').remove();

Answer 2

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

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

---

Jeśli istnieje jakiekolwiek dane lub ładowarki na obrazie, możemy użyć .detach().

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

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

---

Jeśli istnieje kilka z nich, będziemy chcieli użyć .each().

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

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

Answer 3

TEXT NODE musi być owinięta w znacznika html taki jak Span. Próbowałem tego z podanym przez Ciebie JSFiddle i nie sprawiało żadnych problemów. http://jsfiddle.net/pSmDW/1/

Powodzenia! 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

dla jQuery v1.9.1 i poniżej poniżej będzie działać:

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

będzie to wyglądać dla wszystkich elementów (w tym węzły tekstowe), które aren” t obrazy i usuń je.

$(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>

dla jQuery> 1.9.1 istnieje problem przy korzystaniu z .contents():not(). Aby obejść ten problem, można pobrać obraz, a następnie zamienić .html() elementu na obraz.

$(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>