How to remove table row from local storage

Question

This is what is in my local storage currently:

cart:"[{"Movie_Title":"I Feel Pretty","date":"Monday","time":"9:30", 
"cinema_number":"3","price":"8.50","seat_number":""}, {"Movie_Title":"Breath","date":"Monday", 
"time":"17:30","cinema_number":"1","price":"8.50","seat_number":""}]"

This is what I'm using to display the cart at the moment:

function displayCart(){
var jsonData = JSON.parse(localStorage.getItem('cart'));
$.each(jsonData, function(key, value){$('#cart').append(`<table id = 
cart_table border= 10 ><thead><tr><th scope = "col">Movie Title</th><th scope = "col">Date</th><th scope = "col">Time</th><th scope = "col">Cinema</th><th scope = "col">Price</th><th scope = "col">Seat Number</th><th scope = "col">Remove</th></tr><td class="Movie_Title">${value.Movie_Title}</td><td class="Date">${value.date}</td><td class="Time">${value.time}</td><td 
class="Cinema_number">${value.cinema_number}</td>
 <td class="Price">${value.price}</td>
  <td class="seat_number">${value.seat_number}</td>
  <td><Button onclick = 'removeFromCart()'>Remove Item</Button>
</tr></table>`);
})
}

I am currently displaying a signle table for each item in "cart", like this:

<table id="cart_table" border="10">
<thead>
<tr>
<th scope="col">Movie Title</th>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Cinema</th>
<th scope="col">Price</th>
<th scope="col">Seat Number</th>
<th scope = "col">Remove Item</th>
</tr>
<tr>
<td class="Movie_Title">I Feel Pretty</td>
<td class="Date">Monday</td>
<td class="Time">9:30</td>
<td class="Cinema_Number">3</td>
<td class="Price">8.50</td>
<td class="Seat_Number"></td>
  <td><Button onClick = 'removeFromCart()'>Remove Item</Button></td>
</tr>

</thead>
</table>

At the moment my "removeFromCart" function does not do anything.

How can I make it remove the specific table row values from locastorage?

Answer 1

You can use index value and pass it to the function and remove the row by it. (the same order is in array and in template). You can watch demo here:

`https://jsfiddle.net/Lqutq8r5`

, but it has an issue when you have to redraw the table due the index changes.

To remove this issue, generate unique identificator to each row and find by it the row in foreach.

Answer 2

Based on your object it looks like "key" is an index since you don't have each set of properties named (I'd rename key to index in that case to be more descriptive). When you are generating the HTML, just slip the key into the method call and modify your method call to accept that value. ...<Button onclick = 'removeFromCart("+ key +")'>Remove Item</Button>. Then you could use that index in the method to target the array to remove the item with the instructions below.

This is where it seems to get a little rough. Removing specific items from an array does not seem to be so straight-forward as adding one wherever you want. I found this SO with some pretty good outlines of accomplishing this with array.splice and creating a prototype function named remove: How do I remove a particular element from an array in JavaScript?. That link is also a really good learning experience as a couple people outlined JS version-specific solutions.

Answer 3

Convert the localStorage string into an element. Remove the row at your desired index or with the identifying attribute you have applied. Then save the table back as a string into the localstorage. Let me know if you need something more visual.