Hice una función de eliminación para una tabla; funciona, pero cuando se actualiza la página, los elementos vuelven. El proyecto se puede encontrar en codepen aquí
const showExpenses = () => { const table = document.getElementById('expenseTable'); table.innerHTML = ''; for(let i = 0; i < expenses.length; i++){ expenseTable.innerHTML += ` <tr > <td class="expItem">${expenses[i].name}</td> <td class="expItem">${expenses[i].date}</td> <td class="expItem">$${expenses[i].amount}</td> <td><a class="deleteButton" href="#" data-id="${expenses[i].id}">Delete</a></td> </tr> `; } } //Remove buttom $(document).ready(function() { $('body').on('click', '.deleteButton', function(e) { e.preventDefault(); // prevent the href default // if you need to access the id... let deleteID = $(this).data('id'); $(this).closest('tr').remove(); }) })Para lograr esto, la idea aquí es guardarlo en un tipo de almacenamiento que sea persistente durante la recarga de una página. Puede lograr esto con localStorage y sessionStorage . En mi ejemplo, solo le mostraré cómo puede usar localStorage, pero puede leer más sobre el almacenamiento de sesiones aquí ( https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage ) .
En su $(document).ready(...) es donde puede cargar desde el almacenamiento de almacenamiento local, y en su oyente deleteButton onClick, puede guardar en el almacenamiento. El almacenamiento local utiliza pares clave-valor para almacenar y recuperar datos, así que lo llames como lo llames cuando guardes los datos también es cómo los recuperas:
$(document).ready(function() { // As soon as jquery loads, load from storage // it will return null if nothing is stored yet deletedExpenses = localStorage.getItem("deletedExpenses"); $('body').on('click', '.deleteButton', function(e) { e.preventDefault(); // prevent the href default // if you need to access the id... let deleteID = $(this).data('id'); $(this).closest('tr').remove(); // You first have to load from storage the array of deleted items, var deletedArr = localStorage.getItem("deletedExpenses"); // If you have nothing stored, this will return null, // And if that's the case, create new array if (!deletedArr) deletedArr = []; } // then push to this array another ID that got deleted deletedArr.push(deleteID); localStorage.setItem("deletedExpenses", deletedArr); }) })Obviamente, este no es un ejemplo completo, pero debería guiarlo en la dirección correcta.
Obtenga más información sobre almacenamiento local aquí: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage