快捷導(dǎo)航

原生JavaScript實(shí)現(xiàn)remove()和recover()功能示例

更新時(shí)間：2018年07月24日 11:42:49 作者：筱葭

這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)remove()和recover()功能,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)類似jQueryremove()和recover()功能的自定義函數(shù),需要的朋友可以參考下

本文實(shí)例講述了原生JavaScript實(shí)現(xiàn)remove()和recover()功能。分享給大家供大家參考，具體如下：

利用原生JavaScript實(shí)現(xiàn)：

1、remove(selectors)刪除指定的一個(gè)或一組元素。

2、recover(selectors)恢復(fù)剛才刪除的元素。

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：關(guān)于javascript事件說(shuō)明可參考本站javascript事件與功能說(shuō)明大全：http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能,結(jié)合實(shí)例形式分析了action-sheet組件彈出菜單的使用技巧,包括元素遍歷、事件響應(yīng)及屬性設(shè)置等操作方法,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
var?let?const關(guān)鍵字之間的區(qū)別及使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了var?let?const關(guān)鍵字之間的區(qū)別及使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
JavaScript中雙符號(hào)的運(yùn)算詳解
這篇文章主要給大家介紹了JavaScript中雙符號(hào)的運(yùn)算，其中包括雙波浪號(hào)和雙感嘆號(hào)的運(yùn)算，文中給出了詳細(xì)的示例代碼，需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2017-03-03
js get和post請(qǐng)求實(shí)現(xiàn)代碼解析
這篇文章主要介紹了js get和post實(shí)現(xiàn)代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果示例
這篇文章主要介紹了微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果,結(jié)合實(shí)例形式分析了微信小程序線性漸變及圓形漸變的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。用JavaScript寫(xiě)的
發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。用JavaScript寫(xiě)的...
2007-04-04
對(duì)象特征檢測(cè)法判斷瀏覽器對(duì)javascript對(duì)象的支持
就是將需要檢測(cè)的方法/對(duì)象作為if語(yǔ)句的判斷條件，具體做法如下
2009-07-07
vant uploader實(shí)現(xiàn)上傳圖片拖拽功能(設(shè)為封面)
這篇文章主要介紹了vant uploader實(shí)現(xiàn)上傳圖片拖拽功能(設(shè)為封面),這個(gè)功能在日常生活中經(jīng)常會(huì)用到，操作非常方便，今天通過(guò)實(shí)例代碼介紹實(shí)現(xiàn)過(guò)程，需要的朋友可以參考下
2021-10-10
一文詳解TypeScript中的內(nèi)置數(shù)據(jù)類型
作為一門(mén)類型安全的編程語(yǔ)言，TypeScript?提供了多種內(nèi)置數(shù)據(jù)類型，幫助我們更好地定義和操作數(shù)據(jù)，下面小編就來(lái)和大家詳細(xì)聊聊這些數(shù)據(jù)類型的相關(guān)知識(shí)吧
2023-06-06
js中g(shù)etter和setter用法實(shí)例分析
這篇文章主要介紹了js中g(shù)etter和setter用法,結(jié)合實(shí)例形式分析了javascript中g(shù)etter和setter的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2018-08-08