使用JQuery删除html页面中的元素
Posted 小哈里
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用JQuery删除html页面中的元素相关的知识，希望对你有一定的参考价值。
1、使用JS代码引用JQuery
有些网站自带JQuery，但是有些没有。
在控制台运行下面的代码可以验证当前网站是否加载了JQuery
if (jQuery)
alert("JQuery已引用成功！");
else
// jQuery 未加载
对于没有JQuery的网站，可以在编辑html元素中的<head></head>标签种手动添加JQuery
随便选择一个版本即可
微软CDN
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
百度CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
新浪CDN
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
也可以通过运行JS代码引入JQuery，下面的代码实现了一个自动在head中添加元素的方案
参考了https://www.codenong.com/1140402/ 网站的几个解决方案，经测试可行。
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
2、JQuery如何选择元素
如果你需要选择带空格的class的元素，比如<element class="a b">使用：
$('.a.b')
如果这个元素还有id可以选择，比如 <element class="a b" id = 'c'>使用：
$('#a.b.c')
你也可以直接选择所有指定的id，比如 <element class="a b" id = 'c'>使用：
$('#c')
3、JQuery如何删除元素
你可以使用remove() 方法移除被选元素，包括所有文本和子节点。
下面的代码会删除所有的p元素
$("p").remove();
你可以使用parent和parents方法找到某一特定的祖先元素
<!--
parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
parent取得很明确就是当前元素的父元素
parents则是当前元素的祖先元素
-->
<html>
<head></head>
<body>
<div id="div1">
<div id="div2"><p></p></div>
<div id="div3" class="a"><p></p></div>
<div id="div4"><p></p></div>
</div>
</body>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("p").parent(); //取得的是div2、div3、div4
$('p').parent('.a'); //取得是div3
$('p').parent().parent(); //取得是div1（这点比较奇特，不过Jquery对象本身的特点决定了这是可行的）
$('p').parents(); //取得的是div1、div2、div3、div4
$('p').parents('.a'); //取得的是div3
</script>
</html>
你可以使用css方法修改页面的样式
$(".detail.layout-main").css('width','100%');
// $("main").css('display','content');
// $("main").css('float','left');
// $("#mainBox").css('width','100%');
// $(".main_father.clearfix.d-flex.justify-content-center").css("width","100%");
4、通过函数组合代码
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
(function()
'use strict';
// var articleBox = $("div.detail.layout-main");
// articleBox.removeAttr("style");
$(".xm-comment.v_j").remove();
$(".xm-player-case").remove();
$(".xui-header-inner._uH").remove();
$(".dl-pc.xz_").remove();
$(".side.layout-side").remove();
$("#rootFooter").remove();
$(".sound-detail-relative-tracks._Qz").remove();
$(".more-intro-wrapper.cY_").remove();
$(".xui-header._uH").remove();
$(".detail.layout-main").css('width','100%');
// $("main").css('display','content');
// $("main").css('float','left');
// $("#mainBox").css('width','100%');
// $(".main_father.clearfix.d-flex.justify-content-center").css("width","100%");
window.print();
)();
对于Chrome打印页面中的页面显示不全问题，可以使用缩放页面缩放到70%或50%解决
以上是关于使用JQuery删除html页面中的元素的主要内容，如果未能解决你的问题，请参考以下文章