我如何使用 jQuery 删除除特定 class 之外的所有 div 和其他 DOM HTML 元素
[英]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:
我有 HTML 结构类似这样div's和<style> 、 <iframe> 、 <script> DOM 我在<body>标记下以及许多在<body>之外）：就像在我的整个代码中看到这个：
<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&p2=0&p3=2&p4=2~2!zeenews.india.com&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.但我想删除所有这些，除了只有一个 div 及其子 DOM <div class="content"意味着它是（ <div class="content" ）完整的内部 HTML in <body>...</body>标签。
simply now i want to remove all '''div''' and <style> , <iframe> , <script> DOM HTML element whether it is outside or inside <body>只是现在我想删除所有 '''div''' 和<style> 、 <iframe> 、 <script> DOM HTML 元素，无论它是在<body>外部还是内部
i want output like this:我想要这样的 output：
<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.我尝试了 jQuery 的所有技巧，但没有完成我的目标。
$('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.但这里的问题是，当我们应用这些 jQuery 规则时，它也会删除<div id="containerbox" style="display:block;">的 div 并且我有我的<div class="content" style="transform: none;">在此作为 Child 所以它也删除了我想要保留的目标 div。
and many changes i tried but it's all removing all div.我尝试了许多更改，但都删除了所有 div。 plz tell me what mistake am making.请告诉我犯了什么错误。
2 个解决方案
解决方案1
2 已采纳 2021-02-11 14:26:45
It's possible to combine:可以组合：
Create a copy of element to add to body, remove everything from body, append the saved element.创建要添加到正文的元素副本，从正文中删除所有内容，append 保存的元素。
The snippet:片段：
var saveIt = $('.content').clone(true); $('body').contents().remove(); $('body').append(saveIt);
.as-console-wrapper { display: none;important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> </div> </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&p2=0&p3=2&p4=2~2.zeenews.india.com&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> <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> </div>
解决方案2
0 2021-02-11 13:58:50
$('div').each(function(){
if(!$(this).hasClass("content")){
$(this).remove();
}
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery的删除里面的所有链接 <div> 除了点击的类别外，具有特定类别的 - JQuery Remove all links inside a <div> that have a particular class except for the one that's clicked
如何在单击元素时切换类，但使用 JQuery 从所有其他元素中删除相同的类？ - How do I toggle a class on click of an element but remove the same class from all other elements using JQuery?
如何从DOM中删除具有特定类名的所有元素？ - How do I remove all elements with a particular class name from the DOM?
如何删除除单击的元素之外的所有其他元素的类 - How to remove a class on all the other elements except on the element that was clicked
如果我使用jQuery更改div的HTML，是否从内存中删除了所有DOM元素和侦听器？ - If I change a div's HTML with jQuery, all DOM elements and listeners removed from memory?
我如何使用jQuery的ajax方法从HTML获取dom元素？ - how can i get dom elements from html using jQuery's ajax method?
JQUERY：如何在DIV中删除除BR和IMG之外的所有HTML标签 - JQUERY: How to remove all HTML tags except BR and IMG in DIV
如何根据特定div中的文本对DOM元素进行排序？ - How can I sort DOM elements based on the text in a particular div?
使用jQuery附加HTML（特定类除外） - Append HTML except particular class using jquery
删除容器中具有特定类的所有HTML元素 - Remove all the Html elements with a particular Class in a container
相关标签