Necesito un consejo. Tengo una tabla, almaceno elementos en ella, que se almacenan en localStorage y luego se insertan en la tabla. Necesito configurar el botón Eliminar en la lista. Para que funcione, cuando hago clic en él, la fila dada se elimina tanto de localStorage como de la tabla.
let form = document.querySelector("#form-list") if(localStorage.getItem("task") == null){ var taskArray = [] } else { taskArray = JSON.parse(localStorage.getItem("task")) } form.addEventListener("submit", function(event){ // event.preventDefault() taskArray.push({ id: uuidv4(), job: event.target.elements.selected.value, task: event.target.elements.text.value }) // Clear the input and select boxes event.target.elements.selected.value = "" event.target.elements.text.value = "" // save localStorage taskArrayJSON = JSON.stringify(taskArray) localStorage.setItem("task", taskArrayJSON) }) const buildTable = function(){ let table = document.getElementById("table") for(let i = 0; i < taskArray.length; i++){ var row = `<tr> <td>${taskArray[i].job}</td> <td>${taskArray[i].task}</td> <td><button class="btn btn-primary" onclick="deleteButton(this)">Delete</button></td> </tr>` table.innerHTML += row } } buildTable(taskArray) const deleteButton = function(row){ let table = JSON.parse(localStorage.getItem("task")) localStorage.removeItem("id") table.splice(row, 1) localStorage.setItem("task", JSON.stringify(table)) } //Podle ID najdeme index daného jména a pomocí splice ho odstraníme const removeTask = function(id){ const index = taskArray.filter(function(nameTask){ return nameTask.id === id }) if(index > -1){ taskArray.splice(index,1) } }Por lo que sé, puede eliminar su fila de su taskArray y finalmente guardarla en el local como antes. (quizás vacíe la tarea local y guárdela de nuevo)
para saber qué fila desea eliminar, le sugiero que establezca un atributo de identificación de datos en su fila y cuando haga clic en el botón Eliminar, obtenga esta identificación de datos y, de acuerdo con ella, elimine la fila.
<h1>Table</h1> <form id="form-list"> <div class="form-group mx-auto col-3" style="margin-top: 2rem;"> <select name="selected" class="form-select"> <option selected>Open this select menu</option> <option value="Programování">Programování</option> <option value="Kódování">Kódování</option> <option value="Meeting">Meeting</option> </select> <input type="text" id="text-input" class="form-control mb-3" placeholder="Zadej text" name="text"> <button value="submit" class="btn btn-primary">Add Task</button> </div> </form> <table class="table table-striped"> <tr class="bg-info"> <th>Job</th> <th>Task</th> <th>Action</th> </tr> <tbody id="table"> </tbody> </table> <script src="js/bootstrap.js"></script> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/uuidv4.js"></script> <script src="js/function.js"></script> <script src="js/script.js"></script> <body> <h1>Table</h1> <form id="form-list"> <div class="form-group mx-auto col-3" style="margin-top: 2rem;"> <select name="selected" class="form-select"> <option selected>Open this select menu</option> <option value="Programování">Programování</option> <option value="Kódování">Kódování</option> <option value="Meeting">Meeting</option> </select> <input type="text" id="text-input" class="form-control mb-3" placeholder="Zadej text" name="text"> <button value="submit" class="btn btn-primary">Add Task</button> </div> </form> <table class="table table-striped"> <tr class="bg-info"> <th>Job</th> <th>Task</th> <th>Action</th> </tr> <tbody id="table"> </tbody> </table> <script src="js/bootstrap.js"></script> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/uuidv4.js"></script> <script src="js/function.js"></script> <script src="js/script.js"></script> </body> </html>