I maded in jqeury https://codepen.io/vanderdrilu/debug/erqmRP
but the problem is working only in debug mode, because of window location.
When the new recipe is added is necessary clean the old elements and give new from storage.
and I use this
// var list = document.getElementById(“place”);
// As long as
has a child node, remove it
//while (list.hasChildNodes()) {
// list.removeChild(list.firstChild);
//}
link was not working but the above is shorter from what I can see. You should explain your problem a little better not quite sure what your asking for.
I use that because in stack is said it is not good to use jQuery and element remove. not remove the child, but rest of code it is in jQuery
try this link codepen
it’s about this task
before adding new recipe value by modal dialog, everything work, collaps and expand etc…
I use for develop VS code. In this is elements remove disabled and replaced by windows.location but in code pen didn’t work.
$(document).ready(function () {
const username ="vandedrilu_recipes";
$("#dialogbuttonedit").hide();
$("#dialogbutton").hide();
//try {
if(localStorage.length >0 && (localStorage[username])!== undefined && localStorage[username]!== null){
ini();
}
function ini() {
// var list = document.getElementById("place");
// As long as <ul> has a child node, remove it
//while (list.hasChildNodes()) {
// list.removeChild(list.firstChild);
//}
var object =[];
object= JSON.parse( localStorage.getItem(username)) ;
for (const key in object) {
if (object.hasOwnProperty(key)) {
const element = object[key];
// var arraIngredients= element.ingredients[0];
// ;
// var linearr= [...element.ingredients]
var line = "";
if ( element.ingredients.length == 0) {
line = '<li class="list-group-item">' + element.tittle + '</li>';
} else {
element.ingredients.forEach(element2 => {
line += '<li class="list-group-item">' + element2 + '</li>';
});
}
$('#place').append('<div class="panel panel-default" >' +
'<div class="panel-heading" ><a href="#' + element.tittle+ '" id="' + element.tittle + '" >' +element.tittle + '</a></div><div id="' + element.tittle + 'a" class="panel-body toggler" >Ingredients<hr><ul class="list-group toggler " after="' + element.tittle+ '" > ' + line + '</ul>' +
' <div><button class="btn btn-danger" id="' +element.tittle+ 'bdele" >delete</button><button class="btn btn-defult" id="' + element.tittle + 'bedit">edit</button></div></div></div>');
$('#' + element.tittle+ 'a').toggle();
}
}}
$('#dialogbutton').click(function () {
var names =[];
var ingArray = $('#dta').val().split(",");
if(localStorage.getItem(username)== null){
names.push({tittle:$('#dinput').val(), ingredients:ingArray});
localStorage[username] = JSON.stringify(names);
}else{
names =JSON.parse( localStorage[username]);names.push({tittle:$('#dinput').val(), ingredients: ingArray});
localStorage[username] = JSON.stringify(names);
// localStorage.setItem(username,names);
}
window.location.reload();
//ini();
});
$('a').click(function () {
var select = $(this);
id = select.attr('id');
var options = {};
options = {
to: {
width: 400,
height: 60
}
};
$('#' + id + 'a').toggle();
});
var editindex = -1;
$('button').click(function () {
var select = $(this);
var ids = select.attr('id');
var id = ids.substring(0, ids.length - 5);
var names ;
if(localStorage.length >0 && (localStorage[username])!== undefined && localStorage[username]!== null){
names= JSON.parse( localStorage[username]);
}
if ((ids).includes('bdele')) {
//DELETE
names.forEach(function(element,i) {
if(element.tittle == id){
names.splice(i,1) ;
}
});
localStorage.setItem(username,JSON.stringify(names) );
//ini();
window.location.reload();
//EDIT
} else if ((ids).includes('bedit')) {
//zobrazí tlačítko
$("#dialogbuttonedit").show();
names.forEach(function(element,i) {
if(element.tittle == id){
$('#dta').text(element.ingredients);
editindex = i;
}});
$('#myModal').on('shown.bs.modal', function () {
$('#dinput').val(id);
$('#dInput').focus();
});
$('#myModal').modal('show');
//len zobrazi
} else if (ids == 'addrecipe') {
$("#dialogbutton").show();
} else if (ids == 'dialogbuttonedit') {
//editovanie postla4en9 edit v dialogoom okne
var ingArray = $('#dta').val().split(",");
names[editindex]={tittle:$('#dinput').val(), ingredients: ingArray};
localStorage.setItem(username,JSON.stringify(names) );
//ini();
window.location.reload();
}
});
});
