原生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 相关文章推荐
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
php时间戳转换代码详解
2019/08/04 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
Angular路由简单学习
2016/12/26 Javascript
初探nodeJS
2017/01/24 NodeJs
js canvas实现橡皮擦效果
2018/12/20 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
一步步教你用Python实现2048小游戏
2017/01/19 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
《只有一个地球》教学反思
2014/02/14 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Python的这些库,你知道多少?
2021/06/09 Python
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
Java数组详细介绍及相关工具类
2022/04/14 Java/Android