原生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 相关文章推荐
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
PHP多例模式介绍
2013/06/24 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
nohup的用法
2014/08/10 面试题
医学检验专业个人求职信范文
2013/12/04 职场文书
读书月活动方案
2014/05/22 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
道歉短信大全
2015/05/12 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python