Recipe: element a didn't react after removed elements and put new

JavaScript
1

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

2

// var list = document.getElementById(“place”);

in jquery is actually var list = $(“#place”)

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.

3

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


  });
});
4

That functionality is removed by codepen for their own security.
that’s why it’s working when you develop on your local machine.

Unfortunately that’s one of the limitations of using Codeped :slight_smile:

5

It’s not point of question.

6

I thought it was, I was providing you with an explanation on why window.reload() is not working.

apologies for any misunderstanding.

7

I yesterday do similar answer to another, so o.k.