How can i remove all div's and other DOM HTML elements except a particular class using jQuery

i have HTML Structure something like this(means many div's and <style> , <iframe> , <script> DOM i have under <body> tag and many on outside of <body> ): Like see this in my whole code:

<body>
  <div id="livebtbox" style="display:block;">
      <div id="livedrag" class="ui-draggable ui-draggable-handle">
        <i class="fa fa-arrows" aria-hidden="true" style="background:#e8e8e8;border-radius:2px;position:absolute;top:-10px;left:-10px;padding:2px;cursor:move;"></i>
        <div id="live-bt" data-url="https://zeenews.india.com/hindi/live-tv">            
          <a>LIVE TV</a>
        </div>
        <div id="cripple" class="circle-rippl"></div>
      </div>
    </div>
    
 
    <script type="text/javascript" src="https://www.kaltura.com/p/1740481/sp/174048100/embedPlaykitJs/uiconf_id/42897261/partner_id/1740481/versions/"></script><script id="izootoSdk" src="https://cdn.izooto.com/scripts/sdk/izooto.js"></script>
<script src="https://hindi.cdn.zeenews.com/hindi/desktop/js/zee-hindi.js?v=1"></script>
<div id="containerbox" style="display:block;">
     <div class="beforecontent" style="transform: none;">
          some content here i don't want
          </div>
<!-- Only the div i want to keep in body tag this is from here-->
<div class="content" style="transform: none;">     
        <div class="top-ad margin-auto text-center top-ad-show" style="margin: 0px auto; width: 970px; height: auto;">
                  
            <div id="div-gpt-ad-1500542080521-0" data-google-query-id="CPiRrP7w4e4CFQUZtwAd3F0ABw">
            
            <div id="google_ads_iframe_/11440465/Zeenews_Hindi_Web/Zeenews_Hindi_AS_ATF_970x90_0__container__" style="border: 0pt none;"><h1> SOME HEADING</h1></div></div>
</div>
<!-- to here -->
</div>
<style>
@media (max-width: 1362px) and (min-width: 1180px) {
    .nav-s-block a {padding: 18px 10px;}
}
@media (min-width: 900px) and (max-width: 1042px) {
    .nav-s-block a {padding: 20px 3px !important;font-size: 13px !important;}
}
@media (min-width: 768px) and (max-width: 899px) {
    .nav-s-block a {padding: 20px 1px !important;font-size: 12px !important;}
}
</style>

   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
 
 <script> 
$(document).ready(function(){
            
$('#livedrag').draggable({cancel: "#live-bt a"});     
$("#live-bt a").on('touchstart click', function() {
    var url = $("#live-bt").attr("data-url");
    $(location).attr('href', url);
});     
 
    
    });

  </script>


<div id="co-container" class="co-container" style="display:none;">
        <div class="co-block clearfix">
          <p>By continuing to use the site, you agree to the use of cookies. You can find out more by clicking 
            <a id="myBtn" target="_cookies" href="/cookie-policy" style="cursor: pointer;"><strong>this link</strong></a>
          </p>
          <a id="myCloseBtn" style="cursor: pointer;" class="co-close">Close</a>

</div>

</body>

<style>
   .modal-body{padding:2px 16px}
  .modal-footer {
  padding: 15px;
  background-color: #f44336;
  color: #fff;
  }
  #mymodal header h2 {
  font-size: 20px;
  }
</style>

<script type="text/javascript" id="adg_pixel_footer_script" async="" src="https://adgebra.co.in/afpf/afpf.js?p1=99&amp;p2=0&amp;p3=2&amp;p4=2~2!zeenews.india.com&amp;p5="></script><script>site = 'hi';type = 'n';id = 845961;$(document).ready(function() {if(site && type && id) {var pvtrhost = "stats.zeenews.com";var pvtrapp = "/apps/pvtr";$.get("https://"+pvtrhost+pvtrapp, {site: site, type: type, id: id});}});</script>
        <!--2021-02-11 06:26:18 PM-->

<span><iframe class="trc-hidden" id="trc-pixel-iframe-6131" name="trc-pixel-iframe-6131" width="0" height="0" style="display:none"></iframe></span><span>

<div id="footer" class="co-container" style="display:none;">
        <div class="co-block clearfix">
          <p>By continuing to use the site, you agree to the use of cookies. You can find out more by clicking 
            <a id="myBtn" target="_cookies" href="/cookie-policy" style="cursor: pointer;"><strong>this link</strong></a>
          </p>
          <a id="myCloseBtn" style="cursor: pointer;" class="co-close">Close</a>

</div>

But i want to remove all of them except only one div and its children DOM that is <div class="content" means it's (<div class="content")complete innner HTML in <body>...</body> tag.

simply now i want to remove all '''div''' and <style> , <iframe> , <script> DOM HTML element whether it is outside or inside <body>

i want output like this:

<body>
<div class="content" style="transform: none;">     
        <div class="top-ad margin-auto text-center top-ad-show" style="margin: 0px auto; width: 970px; height: auto;">
                  
            <div id="div-gpt-ad-1500542080521-0" data-google-query-id="CPiRrP7w4e4CFQUZtwAd3F0ABw">
            
            <div id="google_ads_iframe_/11440465/Zeenews_Hindi_Web/Zeenews_Hindi_AS_ATF_970x90_0__container__" style="border: 0pt none;"><h1> SOME HEADING</h1></div></div>
</div>
</body>

i tried these all tricks of jQuery but not completed my aim.

$('body').find('div:not(.content)').remove();

and

$('div').not('div.content').remove();

and

$('body').children().not('.content').remove();

and

$('div').excludeClass('content').remove();

and

$('div').children().filter(':not(.content)').remove();

but here the problem is that when we apply these jQuery rule then it also remove the div that is <div id="containerbox" style="display:block;"> and i have my <div class="content" style="transform: none;"> under this as Child so its also remove my target div that i want to keep.

and many changes i tried but it's all removing all div. plz tell me what mistake am making.