Question

您知道如何通过以下方式恢复使用JavaScript删除的项目：

elem1.parentNode.removeChild(elem1);

Answer 1

如 MDN documentation removeChild中所述，将返回对已删除子节点的引用。用法如下：

var oldChild = element.removeChild(child);
element.removeChild(child);

此外：

删除的子节点仍然存在于内存中，但不再是其中的一部分的DOM。您可以稍后在代码中重用已删除的节点 oldChild对象引用。

Answer 2

如果不在删除之前将元素存储在变量中，则无法撤消removeChild()调用。在没有赋值的情况下自行调用函数将完全从DOM 和内存中删除它。

您可以强制JavaScript将其存储在内存中以供以后使用/恢复：

var restoration_element = elem1.parentNode.removeChild(elem1);

将后一种语法与赋值运算符一起使用将从显示列表中删除元素elem1，但将其作为参考保留以供日后使用。

Answer 3

我不仅需要获取已删除节点的引用，还需要将已删除节点插入到删除该节点的位置。因此，我必须像这样使用堆栈：

var stack = [];
function removeWithStack() {
    let elem = this,
        parent = elem.parentNode;

    // Note: index here is ES6 only; for ES5 see https://stackoverflow.com/a/23528539/2065702
    let action = {
        "index": Array.from(parent.children).indexOf(elem),
        "parent": parent,
        "elem": parent.removeChild(elem)
    }

    stack.push(action);
}

function popAddStack() {
    let action = stack.pop();
    action.parent.insertBefore(action.elem, action.parent.children[action.index]);
}

var ps = document.querySelectorAll("p");

var stack = [];
function removeWithStack() {
	let elem = this,
        parent = elem.parentNode;
    
    // Note: index here is ES6 only; for ES5 see https://stackoverflow.com/a/23528539/2065702
    let action = {
    	"index": Array.from(parent.children).indexOf(elem),
        "parent": parent,
    	"elem": parent.removeChild(elem)
    }
    
    stack.push(action);
}

function popAddStack() {
	let action = stack.pop();
    action.parent.insertBefore(action.elem, action.parent.children[action.index]);
}

document.querySelector("button").onclick = popAddStack;

ps.forEach(function(p) {
	p.onclick = removeWithStack;
});

button,
p {
    cursor: pointer;
}

<div>
    <p>Test 1</p>
    <p>Test 2</p>
    <p>Test 3</p>
    <p>Test 4</p>
    <p>Test 5</p>
</div>
<button>Undo</button>

恢复使用parentNode.removeChild删除的项目

3 个答案: