¿Cómo eliminar todo dentro de un DIV a excepción de un elemento?

Question

que tienen el código HTML siguiente:

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

Quiero eliminar todo dentro div.item a excepción de la imagen. Intenté usar este fragmento de código, pero el nodo de texto aún permanece dentro del div.

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

¿Alguna sugerencia?

Aquí es mi jsFiddle que se puede jugar con: http://jsfiddle.net/pSmDW/

Answer 1

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

Answer 2

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

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

---

Si hay cualquier dato o manipuladores en la imagen, podemos utilizar .detach().

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

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

---

Si hay varios de éstos, tendrá que utilizar .each().

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

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

Answer 3

El nodo de texto tiene que ser envuelto en una etiqueta HTML como lapso. Intenté esto con el JSFiddle que me proporcionó y no tuve problemas. http://jsfiddle.net/pSmDW/1/

¡Buena suerte! 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

para jQuery v1.9.1 y por debajo del siguiente trabajo:

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

Esto buscará todos los elementos (incluyendo los nodos de texto) que aren' t imágenes y eliminarlos.

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

para jQuery> 1.9.1 no es un problema cuando se utiliza con .contents():not(). Como solución, puede tomar la imagen y luego reemplazar el .html() del elemento con la imagen.

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