Hello! Please help me with the problem, I’m completely confused (I create a table in index.html , a line in it, a Delete button in one of the cells. I put the contents of the line in the localstorage in delButton, I delete the line from the page. I deleted.html to deleted.html , The deletedLS function deletedLS already loaded my row into the exact same table. Already here I’ll click delete - the row is deleted, but at the same time it is added to the repository again, complementing the existing key there and after reloading the page already two such identical rows pull ((How to index.html when removing Adds a row in localstorage as early as deleted.html is simply removed? Make 2 different functions? To pick up some condition ?? 3 days I suffer not have the brains, the help!
function insertRow(id) { var tbody = document.getElementById(id); var row = document.createElement("tr"); row.setAttribute('class', 'row_class'); var btnDelete = document.createElement("input"); btnDelete.type = 'image'; btnDelete.className = 'btndelete'; btnDelete.setAttribute('id', 'btndelete_id'); btnDelete.src = 'icons/delete.png'; btnDelete.setAttribute('onclick', 'delButton(event)'); var tdItem = document.createElement("td"); tdItem.appendChild(document.createTextNode(document.getElementById("add_id").value)); var tdPrice = document.createElement("td"); tdPrice.appendChild(document.createTextNode(document.getElementById("price_id").value)); var tdAction = document.createElement("td"); tdAction.setAttribute('colspan', '2'); tdAction.className = 'td_action'; tdAction.appendChild(btnEdit); tdAction.appendChild(btnDelete); row.appendChild(tdItem); row.appendChild(tdPrice); row.appendChild(tdAction); tbody.appendChild(row); localStorage.setItem('ShoppingList', document.getElementById('myTable').innerHTML); return false; } function delButton(elemCheck) { var checkboxElement = elemCheck.target; var elCheck = checkboxElement.parentElement.parentElement; var currentlist = localStorage.getItem('DeleteList'); if (currentlist === null) { currentlist = ''; } currentlist += elCheck.outerHTML; localStorage.setItem('DeleteList', currentlist); elCheck.parentElement.removeChild(elCheck); localStorage.setItem('ShoppingList', document.getElementById("myTable").innerHTML); } function deletedLS() { var tbody = document.getElementById('tbody'), DeleteList = localStorage.getItem('DeleteList'); if (DeleteList !== null) { tbody.innerHTML = DeleteList; }; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet"> <title>Cart - Done Items</title> <link rel="shortcut icon" type="image/png" href="icons/shortcut_done.ico" /> </head> <body onload="doneLS();return false;" class="body"> <div class="menu"> <ul class="list"> <li class="li"><a class="link" href="index.html">Shopping list</a></li> <li class="li_done"><a class="link_done" href="done.html">Done</a></li> <li class="li"><a class="link" href="deleted.html">Deleted</a></li> </ul> </div> <div class="main"> <h1 class="h1">Done Items</h1> </div> <div class="table"> <table cellpadding="0" cellspacing="0" border="0" class="mytable" id="myTable" cellspacing="0" border="1"> <thead> <tr id="tr_id" class="tr"> <th class='td'>#</th> <th>Done</th> <th>Item</th> <th>Quantity</th> <th>Price $</th> <th colspan="2" width="100">Action</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> </div> </body> <script src="js/main.js"></script> </html> 
