原生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学习资源站点
Aug 29 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
详解python配置虚拟环境
2019/04/08 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python 求定积分和不定积分示例
2019/11/20 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python中包的用法及安装
2020/02/11 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
生日礼品店创业计划书范文
2014/03/21 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
车辆年审委托书范本
2014/09/18 职场文书
教师个人成长总结
2015/02/11 职场文书
党员年终个人总结
2015/02/14 职场文书
乒乓球比赛通知
2015/04/27 职场文书
简历自我评价范文
2019/04/24 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Python - 10行代码集2000张美女图
2021/05/23 Python
nginx lua 操作 mysql
2022/05/15 Servers