原生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 相关文章推荐
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
Angular简单验证功能示例
Dec 22 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
js实现车辆管理系统
Aug 26 Javascript
JS中一些高效的魔法运算符总结
May 06 Javascript
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
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
jQuery实现带进度条的轮播图
2020/09/13 jQuery
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
基于Python List的赋值方法
2018/06/23 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python语言的优势是什么
2020/06/17 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
《口技》教学反思
2014/02/21 职场文书
学习普通话的体会
2014/11/07 职场文书
优秀教师单行材料
2014/12/16 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
小学运动会加油稿
2015/07/22 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
python实现双向链表原理
2022/05/25 Python