用Jquery清除DIV除了一個元素和他的孩子

Question

我知道有很多關於這個的話題。在這個主題主要是關於刪除除了一個元素，但它的孩子也在刪除。

所以我有什麼：

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