Восстановить элемент, удаленный с parentNode.removeChild

Question

Знаете ли вы, как я могу восстановить элемент, удаленный с помощью JavaScript, следующим образом:

elem1.parentNode.removeChild(elem1);

Answer 1

Как написано в документации MDN 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://stackru.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://stackru.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>