I want to know if its possible to use Javascript to set LocalStoarge for items to hide them.
The catch is they have unique IDs inside their ID attribute that gets generated so you have no idea what they might be but if you click the delete button it should set an item and hide it for that specific item with that specific ID:
<div class="'.$contact_id.'-chat" id="'.$contact_id.'">
<button onclick="deleteChat(this)">X</button>
</div>
Juan Pablo Isaza
You can do it this way:
<div class="1-chat" id="'.$contact_id.'">
<button onclick="deleteChat('.$contact_id.')">X</button>
</div>
window.onload = deleteChats();
function deleteChat(id){
document.getElementById(id).style.display = "none"
let items = JSON.parse(localStorage.getItem("deleted_items"));
if(items){
items.push(id);
}
else{
items = [id];
}
localStorage.setItem("deleted_items",JSON.stringify(items));
}
function deleteChats(){
const chats = JSON.parse(localStorage.getItem("deleted_items"));
chats.map(chat => {
document.getElementById(chat).display = "none";
})
}
Js Fiddle Link check this out
hide all ids from localstorage
window.onload = function() {
allStorage().map(id => {
$("#"+id).hide();
})
}
Get get all ids in localstorage
function allStorage() {
var values = [],
keys = Object.keys(localStorage),
i = keys.length;
while ( i-- ) {
values.push( localStorage.getItem(keys[i]) );
}
return values;
}
Get id from class, hide the div and set an item in localstorage
$('.del').on('click', function(event) {
$("#"+this.id).hide();
window.localStorage.setItem("id"+this.id, this.id)
})