JqueryでDIVをクリアします。子供と一緒に1つの要素を除いて

Question

私はそれについて多くの話題があることを知っています。このトピックでは、主に1つの要素を除いて削除について書かれていますが、子供も削除されています。

は、だから私は持っているもの：

<div id='maindiv'> 
    <div id='dont want to remove'> 
     <div class= "don't want to remove"></div> 
     <div class= "dont want to remove"></div> 
    </div> 
    <div id="want to delete"></div> 
</div> 

私はjQueryを使ってこれをやろうとしている：私はこれを行うと

$('#maindiv').find('*:not("#dont want to remove")').remove(); 

私はこれを持っている子なし。

<div id='maindiv'> 
     <div id='dont want to remove'> 
     </div> 
</div> 

ありがとうございます。良い一日を。あなたが使用することができます

Answer 1

：

$('#maindiv').children(':not(.dont_want_to_remove)').remove(); 

を私は子供の代わりを使っ見つけ、を見つけるには、再帰的であり、それは内側の要素

を削除理由ですまた、私はクラスを使用することに注意してください"dont_want_to_remove"（または、あなたが好きな場合はIDをつけることができます）スペースなし！

Answer 2

これはセレクタでは（不可能ではないにしても）難しいです。

代わりに、あなたはそのクラスを持っていないすべての要素削除し、要素とそのすべての要素に「dontremove」クラスを追加することができます。

//add dontremove class to ID and all its descendants: 
 
$('#dontwanttoremove, #dontwanttoremove *').addClass('dontremove');     
 

 
//remove all elements without the dontremove class 
 
$('#maindiv :not(.dontremove)').remove(); 
 

 
//clean up 
 
$('.dontremove').removeClass('dontremove');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='maindiv'> 
 
    <div id='dontwanttoremove'> 
 
    <div>Keep me 1</div> 
 
    <div>Keep me 2</div> 
 
    Keep me 3 
 
    </div> 
 
    <div id="wanttodelete">Delete me</div> 
 
</div>