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://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>

.