本文介绍如何使用原生JavaScript实现类似jQuery的remove()和recover()功能。通过记录元素的父节点、HTML内容及后续兄弟节点，实现指定元素的移除与即时恢复，适用于需要临时隐藏或批量处理DOM结构的场景。
原生JavaScript实现元素移除与恢复功能
本文介绍如何利用原生JavaScript实现元素的移除与恢复功能，供开发者参考使用。
具体实现方式如下：
1、调用remove(selectors)方法，可删除指定的单个或一组DOM元素。
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事件的详细说明，可参考本站提供的javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event
如需了解更多JavaScript相关内容，建议查阅本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》。
希望本文所述内容能对您的JavaScript程序设计有所帮助。