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();
}
});
});
