原生JavaScript实现remove()和recover()功能示例


Posted in Javascript onJuly 24, 2018

本文实例讲述了原生JavaScript实现remove()和recover()功能。分享给大家供大家参考,具体如下:

利用原生JavaScript实现:

1、remove(selectors)删除指定的一个或一组元素。

2、recover(selectors)恢复刚才删除的元素。

function remove(selectors) {
  selectors.removeNode = [];
  if (selectors.length != undefined) {
    var len = selectors.length;
    for (var i = 0; i < len; i++) {
      selectors.removeNode.push({
        parent: selectors[i].parentNode,
        inner: selectors[i].outerHTML,
        next: selectors[i].nextSibling
      });
    }
    for (var i = 0; i < len; i++)
      selectors[0].parentNode.removeChild(selectors[0]);
  }
  else {
    selectors.removeNode.push({
      parent: selectors.parentNode,
      inner: selectors.outerHTML,
      next: selectors.nextSibling
    });
    selectors.parentNode.removeChild(selectors);
  }
}
function recover(selectors) {
  var len = selectors.removeNode.length;
  for (var i = 0; i < len; i++) {
    var node = selectors.removeNode[i];
    if (node.next == null)
      node.parent.innerHTML += node.inner;
    else {
      var div = document.createElement("div");
      div.innerHTML = node.inner;
      node.parent.insertBefore(div.childNodes[0], node.next);
    }
  }
}

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
js获取域名的方法
Jan 27 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
js+canvas实现验证码功能
Sep 21 #Javascript
微信小程序网络请求封装示例
Jul 24 #Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 #Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 #Javascript
微信小程序实现横向增长表格的方法
Jul 24 #Javascript
You might like
层叠菜单的动态生成
2006/10/09 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
详解Python的Django框架中的templates设置
2015/05/11 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python将视频转换为全字符视频
2019/04/26 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python虚拟环境venv用法详解
2020/05/25 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
高中军训感言800字
2014/03/05 职场文书
社区戒毒工作方案
2014/06/04 职场文书
夫妻吵架保证书
2015/05/08 职场文书
思想品德课教学反思
2016/02/24 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python