Jquery empty() div salvo elementos coincidentes

Question

¿Hay alguna manera de vaciar un div dejando solo elementos con un nombre de clase específico? O bien, ¿hay alguna manera de eliminar todos los elementos dentro de un div dejando solo elementos con una clase especificada?

Answer 1

Esto debería hacer el truco:

$('#theDiv').find('*').not('.className').remove(); 

marcado de la muestra:

<div id="theDiv"> 
    <p>this will be removed</p> 
    <p class="className">this will stay</p> 
</div> 

Answer 2

@ manera de Marve es probablemente mejor, pero aquí es otra de todos modos (usando filter):

$("#yourDiv").html($('#yourDiv').filter('.IWantThisClass, .IWantThisToo').html()); 

Answer 3

intente esto

$('#theDiv').find('*:not(".className")').remove(); 

Answer 4

Aquí es otra opción utilizando sólo selectores jQuery:

$("#theDiv *:not('.className')").remove(); 

El problema con un método como este y los de arriba es si hay algún elementos secundarios que también serán eliminadas, por ejemplo:

<div id="theDiv"> 
    <p>this will be removed</p> 
    <p class="className"><strong>this will also be removed :(</strong></p> 
</div> 

También se eliminará :( texto también se eliminará porque coincide con el comodín * y no tiene la clase className. Con el fin de resolver este nos gustaría sólo para filtrar hijos directos de los padres, tales como:

$("#theDiv > *:not('.className')").remove();