利用原生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);
}
}
}

浅谈原生JavaScript实现remove()和recover()的更多相关文章

  1. 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  2. 浅谈 原生javaScript && react 实现全局触摸按钮(附带对addeventlistener的了解)

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  3. 浅谈原生JavaScript的动画和特效

    一.JavaScript中的动画原理 动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的an ...

  4. 浅谈前端JavaScript编程风格

    前言 多家公司和组织已经公开了它们的风格规范,详细可參阅jscs.info,以下的内容主要參考了Airbnb的JavaScript风格规范.当然还有google的编程建议等编程风格 本章探讨怎样使用E ...

  5. JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈

    toStirng()与Object.prototype.toString.call()方法浅谈 一.toString()是一个怎样的方法?它是能将某一个值转化为字符串的方法.然而它是如何将一个值从一种 ...

  6. 浅谈JavaScript中的内存管理

    一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...

  7. 浅谈ES6原生Promise

    浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...

  8. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  9. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

随机推荐

  1. list与Set、Map区别及适用场景

    1.List,Set都是继承自Collection接口,Map则不是 2.List特点: 元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复,重复元素会覆盖掉,(注意:元素虽然无放 ...

  2. ASP.NET MVC ViewBag/ViewData/TempData区别

    ViewBag/ViewData public dynamic ViewBag { get; } public ViewDataDictionary ViewData { get; set; } Vi ...

  3. 最经典的常用拍照姿势大全,顶级POSE

    伸出手遮阳光.   捂住一只眼睛.   手放在最旁.这是一个极具诱惑的姿势 站立,背对镜头,扭过来,仰角拍, 俩手按在头两边,歪头,或者直头,表情一般都困惑,迷茫,咬下嘴唇效果更佳.         ...

  4. Backbone hello world

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  5. nginx与apache的参考配置

    nginx与apache是两大最主流的服务器,功能强大,但配置起来也比较麻烦,对于初学者来讲可能有些地方并不完全清楚其作用,这里搜集了一些配置的作用及其使用方法.其中nginx提供了推荐配置,而apa ...

  6. 4.翻译系列:EF 6 Code-First默认约定(EF 6 Code-First系列)

    原文地址:http://www.entityframeworktutorial.net/code-first/code-first-conventions.aspx EF 6 Code-First系列 ...

  7. Atitit.mysql 5.0 5.5  5.6 5.7  新特性 新功能

    Atitit.mysql 5.0 5.5  5.6 5.7  新特性 新功能 1. MySQL  5.6    5 大新特性1 1.1. 优化器的改进1 1.2. InnoDB 改进1 1.3. 使用 ...

  8. [svc]arp协议的细枝末节

    tcpdump抓取arp包 tcpdump -nn -i calif24874aae57 -e arp数据包格式 操作字段指出四种操作类型: arp请求 1 arp应答 2 rarp请求 3 rarp ...

  9. function 与 => 的区别

    在JS中,箭头函数并不是简单的function(){}匿名函数的简写语法糖,实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,在编写函数时就已经确定了.而匿名函数的this ...

  10. GC调优在Spark应用中的实践[转]

    作者:仲浩   出处:<程序员>电子刊5月B   摘要:Spark立足内存计算,常常需要在内存中存放大量数据,因此也更依赖JVM的垃圾回收机制.与此同时,它也兼容批处理和流式处理,对于程序 ...