原生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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
一篇不错的Python入门教程
2007/02/08 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python实现随机漫步功能
2018/07/09 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
五好家庭申报材料
2014/12/20 职场文书
优秀党支部申报材料
2014/12/24 职场文书
教师素质教育心得体会
2016/01/19 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python