原生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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
vuejs实现递归树型菜单组件
Jan 13 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python实现最速下降法
2020/03/24 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
golang/python实现归并排序实例代码
2020/08/30 Python
股权转让协议书
2014/04/12 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
企业口号大全
2014/06/12 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
泰山导游词
2015/02/02 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android