原生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中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
详解CocosCreator消息分发机制
Apr 16 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+mysql写的留言本
2006/10/09 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
django批量导入xml数据
2016/10/16 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
在django view中给form传入参数的例子
2019/07/19 Python
简单了解python数组的基本操作
2019/11/26 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python with标签使用方法解析
2020/01/17 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
与美同行演讲稿
2014/09/13 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
保管员岗位职责
2015/02/14 职场文书
班主任寄语2015
2015/02/26 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL