原生JavaScript实现remove()和recover()功能示例

 更新时间:2018年07月24日 11:42:49   作者:筱葭  
这篇文章主要介绍了原生JavaScript实现remove()和recover()功能,结合实例形式分析了javascript实现类似jQueryremove()和recover()功能的自定义函数,需要的朋友可以参考下

本文实例讲述了原生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.jb51.net/table/javascript_event

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • layer更改皮肤的实现方法

    layer更改皮肤的实现方法

    今天小编就为大家分享一篇layer更改皮肤的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序使用canvas绘制钟表

    微信小程序使用canvas绘制钟表

    这篇文章主要为大家详细介绍了微信小程序使用canvas绘制钟表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • javascript面向对象之访问对象属性的两种方式分析

    javascript面向对象之访问对象属性的两种方式分析

    这篇文章主要介绍了javascript面向对象之访问对象属性的两种方式分析,实例分析了直接访问对象属性的方式与数组访问方式,需要的朋友可以参考下
    2015-01-01
  • javascript中String对象的slice()方法分析

    javascript中String对象的slice()方法分析

    这篇文章主要介绍了javascript中String对象的slice()方法,以实例形式分析了slice()方法的定义、参数与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • css+html+js实现五角星评分

    css+html+js实现五角星评分

    这篇文章主要为大家详细介绍了css+html+js实现五角星评分,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • javascript+HTML5 canvas绘制时钟功能示例

    javascript+HTML5 canvas绘制时钟功能示例

    这篇文章主要介绍了javascript+HTML5 canvas绘制时钟功能,结合实例形式分析了javascript+HTML5 canvas数值运算、图形绘制与时间显示相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • JavaScript数字数组的13个实用小技巧

    JavaScript数字数组的13个实用小技巧

    数组是JS最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率,这篇文章主要给大家分享介绍了关于JavaScript数字数组的13个实用小技巧,需要的朋友可以参考下
    2023-11-11
  • 最好用的Bootstrap fileinput.js文件上传组件

    最好用的Bootstrap fileinput.js文件上传组件

    这篇文章主要为大家详细介绍了最好用的Bootstrap fileinput.js文件上传组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 微信小程序中使用echarts方法(全网最详细教程!)

    微信小程序中使用echarts方法(全网最详细教程!)

    现在越来越多的项目都在使用可视化的功能,那么使用echarts实现是一种不错的选择,下面这篇文章主要给大家介绍了关于小程序中使用echarts的方法,本文介绍的方法应该是全网最详细教程,需要的朋友可以参考下
    2023-06-06
  • JS获取鼠标相对位置的方法

    JS获取鼠标相对位置的方法

    这篇文章主要介绍了JS获取鼠标相对位置的方法,涉及javascript事件响应及针对页面元素属性的动态操作技巧,需要的朋友可以参考下
    2016-09-09

最新评论