//最新更新:2017-11-25
//现在可以通过更强大而快捷的方式为所有的HTMLElement元素的Dom操作扩展新的方法【注意事项:处理HTMLElemnt元素时,此法对IE-8无效】
//原理:原型 (function(){
HTMLElement.prototype.remove = function(){
if(this.parentNode){
this.parentNode.removeChild(this);
}
}
})(); //demo
var div = document.createElement("div");
div.setAttribute("id","demo");
div.innerText = "hello";
document.body.append(div);
//div.remove();

传统方式:
document.getElementById("test").parentNode.removeChild(document.getElementById("test"));

function removeById(Id){
document.getElementById(Id).parentNode.removeChild(document.getElementById(Id))
}
function removeByClassName(classNames,indexs){

   for(var i = 0;i<classNames.length;i++){
document.getElementsByClassName(classNames[i])[indexs[i]].parentNode.removeChild(document.getElementsByClassName(classNames[i])[indexs[i]]
); } }

以清理百度文库为例:

step0:将文档全部页面都在网页上展开

step1:点击文库的全屏图标

step2:

clear();
function removeById(Id){
document.getElementById(Id).parentNode.removeChild(document.getElementById(Id))
}
function removeByClassName(classNames,indexs){
for(var i = 0;i<classNames.length;i++){
document.getElementsByClassName(classNames[i])[indexs[i]].parentNode.removeChild(document.getElementsByClassName(classNames[i])[indexs[i]]);
}
}
removeById("next_doc_box");
removeByClassName(["fix-searchbar-wrap","reader-tools-bar-wrap","pay-page-mod","ft","footer","new-ico-wkmember-free-doc"],[0,0,0,0,0,0]);

  

JavaScript之Dom操作【删除当前节点】的更多相关文章

  1. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  2. 第一百一十五节,JavaScript,DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  3. Python之路day13 web 前端(JavaScript,DOM操作)

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  4. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  5. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

  6. JavaScript之DOM操作,事件操作,节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

  7. JavaScript 的DOM操作详解

    内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...

  8. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  9. JavaScript原生DOM操作API总结

    最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 原文:http://www.cnblogs.com/liuxianan/p/javascript-dom-api.html 几种对象 Node ...

随机推荐

  1. js & float number bug

    js & float number bug 前端最好不要处理任何的 float number 的计算/精确度转换的操作,不热很容易丢失精度,显示错误! 前端显示个 0.0 都很费劲,最好的方式 ...

  2. 线性代数的本质与几何意义 01. 向量是什么?(3blue1brown 咪博士 图文注解版)

    向量是线性代数最基础.最基本的概念之一,要深入理解线性代数的本质,首先就要搞清楚向量到底是什么? 向量之所以让人迷糊,是因为我们在物理.数学,以及计算机等许多地方都见过它,但又没有彻底弄懂,以至于似是 ...

  3. html5 视频和音频

    视频:html5支持视屏文件或者视屏流. html5使用video元素来播放视屏,支持的类型有OGG,MEPG 4,webM,但是不同的浏览器支持类型不同. src可以放置视屏文件的路径,可以使用元素 ...

  4. 微信小程序的界面下拉刷新

    小程序的下拉刷新的值设置:需要设置app.json的window中 "navigationBarTextStyle":true  

  5. 自学Linux Shell16.4-在命令行上使用函数

    点击返回 自学Linux命令行与Shell脚本之路 16.4-在命令行上使用函数 脚本函数不仅可以用作shell脚本命令,也可以用作命令行界面的命令.一旦在shell中定义了函数,可以从系统的任意目录 ...

  6. 自学Zabbix11.3 Zabbix SNMP 常用OID列表

    点击返回:自学Zabbix之路点击返回:自学Zabbix4.0之路点击返回:自学zabbix集锦 自学Zabbix11.3 Zabbix SNMP 常用OID列表 点击获取CISCO设备OID 系统参 ...

  7. LoadRunner断言:正确结果有多种情况

    用过lr的都知道,我们可以用web_reg_find这个注册函数判断某个请求的返回中是否有我们要找的内容. 但是,如果正常的情况有多种,该如何断言呢? 设置多个检查点 把每个检查点获取到的结果数量相加 ...

  8. Java -- JDBC 学习--使用 DBUtils

    Apache—DBUtils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdb ...

  9. GNOME Shell Extension常用扩展

    这篇博文的,主要目的是为了方便我和大家安装GNOME扩展.我将我安装过的所有扩展列在此处. 常用扩展 Clipboard Indicator https://extensions.gnome.org/ ...

  10. A1012. The Best Rank

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...