JQuery preserve data on element remove from dom

Question

I have some data on the div elements, which I then remove from dom at some point (and push to array) and reinsert later int to the dom, but the data gets lost. Is there a way to preserve this data for later when I reinsert it into the dom. Its not just one or two data-attributes I could create in html, but little more than that.

I am removing elements from dom the following way:

arr = [];

playlistContent.find('.box').each(function(){
    arr.push($(this));
})
playlistContent.empty();//remove also some other elements present in there

How are you removing it from the DOM? There is a difference between `remove()` and `detach()` https://api.jquery.com/detach — Taplar, Mar 19 '19 at 17:16
`empty()` is going to essentially do a `remove()` on all the children of the element. If you want the data to be preserved, you are going to have to detach the elements you want to preserve, not remove them. — Taplar, Mar 19 '19 at 17:24

score 1 · Accepted Answer · answered Mar 19 '19 at 17:26

1

Detach the elements you want to later readd. I left the empty in there in case there were other elements in the content other than the boxes.

var arr = playlistContent.find('.box').detach().get();

playlistContent.empty();

answered Mar 19 '19 at 17:26

Taplar

24,788
4
22
35

score -1 · Answer 2 · answered Mar 19 '19 at 17:21

-1

You can use localStorage, which will survive even a page refresh:

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

JQuery preserve data on element remove from dom

2 Answers2