原生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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
JS hashMap实例详解
May 26 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Python 异常处理的实例详解
2017/09/11 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python项目跨域问题解决方案
2020/06/22 Python
Python turtle库的画笔控制说明
2020/06/28 Python
从python读取sql的实例方法
2020/07/21 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
中学教师请假制度
2014/02/03 职场文书
报关专员求职信范文
2014/02/22 职场文书
节约电力资源的建议书
2014/03/12 职场文书
求职信模板
2014/05/23 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技