原生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 相关文章推荐
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 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实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
pandas带有重复索引操作方法
2018/06/08 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
服务员岗位责任制
2014/02/11 职场文书
共产党员承诺书
2014/03/25 职场文书
党在我心中演讲稿
2014/09/02 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
电视新闻稿
2015/07/17 职场文书
党员反邪教心得体会
2016/01/15 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android