How to remove everything within a DIV except for one element?

Question

I have the following 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>

I want to remove everything within div.item except for the image. I tried using this bit of code, but the text node still remains within the div.

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

Any suggestions?

Here's my JSFiddle that you can fiddle with: http://jsfiddle.net/pSmDW/

Answer 1

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

Answer 2

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

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

---

If there's any data or handlers on the image, we can use .detach().

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

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

---

If there are several of these, you'll want to use .each().

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

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