原生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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
flexigrid 参数说明
Nov 23 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
国窖1573广告词
2014/03/21 职场文书
综合实践活动总结
2014/05/05 职场文书
介绍信的格式
2015/01/30 职场文书
银行实习推荐信
2015/03/27 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
PL350与SW11的比较
2021/04/22 无线电
Django 实现jwt认证的示例
2021/04/30 Python
Python语言内置数据类型
2022/02/24 Python