原生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 相关文章推荐
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
jQuery 插件开发指南
Nov 14 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 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 静态化实现代码
2009/03/20 PHP
PHP取进制余数函数代码
2012/01/19 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
javascript各种复制代码收集
2008/09/20 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
django使用html模板减少代码代码解析
2017/12/12 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Python itertools.product方法代码实例
2020/03/27 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
《埃及的金字塔》教学反思
2014/04/07 职场文书
三问三解心得体会
2014/09/05 职场文书
群众路线专项整治方案
2014/10/27 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
语文教师求职信范文
2015/03/20 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
我的长征观后感
2015/06/09 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书