Help adding Remove and Title Function. Can someone help me add the Remove and Title function to the following javascript.

cart.html

         
 
My Books
 
 
 
Title
 
Qty
 
UnitPrice
 
$UnitPrice
 
Line Total
 
Total $0.00
 
 
 
 
 
 
 
  
 
  
 
 
 
 Book Count :     

cart.js

// Shopping Cart Assignment // You can use this data for seeding your cart // Or you can create your own books = [ { title: 'Absolute Java', qty: 1, price: 114.95 }, { title: 'Pro HTML5', qty: 1, price: 27.95 }, { title: 'Head First HTML5', qty: 1, price: 27.89 } ]; var tbody = null; window.onload = ()=>{ tbody = document.getElementsByTagName("tbody")[0]; let temp = window.localStorage.getItem("cart"); if (temp) { books = JSON.parse(temp); } //Load books buildBooks(); updateTotal(); updateBookCount(); //new book button var btnNew = document.getElementById("new"); btnNew.addEventListener("click",()=>{ //insert new book let newBook = { title: "Test Book", qty: 1, price: 10.99 } //push to array books.push(newBook); tbody.innerHTML = ""; //clear ody of table buildBooks(); updateTotal(); updateBookCount(); updateTitle(); //updateUnitPrice(); //updateLineTotal(); }) //new book button var btnSave = document.getElementById("save"); btnSave.addEventListener("click",()=>{ //save to localStorage window.localStorage.setItem("cart",JSON.stringify(books)); }) } const updateTotal=()=>{ var total = document.getElementById("total"); var totalCost = 0; books.forEach((book)=>{ totalCost += book.qty * book.price; }) total.innerHTML = totalCost.toFixed(2); } const updateBookCount = ()=>{ var total = document.getElementById("count"); count.innerHTML = books.length } const buildBooks = () => { books.forEach((book,index)=>{ var tr = ""; tr += `  `; tr += `  `; tr += `  `; tr += ``; tr += ``; tr += `  ;` //tbody.append(tr); tbody.innerHTML += tr; //update unit price and line total updateUnitPrice(index); updateLineTotal(index); }); } const remove = (id)=>{ $("remove").on("click", function(event) { event.preventDefault(); } const updateUnitPrice = (id)=>{ let price = books[id].price.toFixed(2); let unitPrice = document.getElementById("unit_price_" + id); unitPrice.innerHTML = price; } const updateLineTotal = (id)=>{ let price = (books[id].qty * books[id].price).toFixed(2); let lineTotal = document.getElementById("line_total_" + id); lineTotal.innerHTML = price; } const updateQty = (id,el)=>{ let qty = el.value; books[id].qty = paseInt(qty); updateTotal(); updateLineTotal(id); } const updatePrice = (id,el)=>{ let price = el.value; //string books[id].price = parseFloat(price); //convert float updateTotal(); updateLineTotal(id); updateUnitPrice(id); } const updateTitle = (id,el)=>{ let title = el.value; books[id].title = paseInt(title); }

cart.css

table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; } caption { font-size: larger; } th, td { padding: .5em; } th, thead { background: #000; color: #fff; border: 1px solid #000; } tr { background: #ccc; } tbody tr:hover { background: #def; } td { border-right: 1px solid #777; } table { border: 2px solid #777; } tfoot tr { background: #000; color: #fff; border: 1px solid #000; text-align: center; } tfoot td { border: none; } input { padding: 5px; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 5px 5px 5px #888888; -moz-box-shadow: 5px 5px 5px #888888; box-shadow: 5px 5px 5px #888888; } .title { width: 200px; } .qty { text-align: center; } input:focus { background-color: yellow; font-weight: bold; color: #FF4500 } button { padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #ccc; font-weight: bold; width: 100px; background: #fff; } button:hover { background: yellow; }