n HTML and JS I try to do a remove button in js function, what should I do here

Question

n HTML and JS

I try to do a remove button in js function, what should I do here

I need to fill the removeItem() function under Cart class

// single state store
class Store {
constructor (storage) {
this.storage = storage; // assuming local storage will be passed in as storage
// these are the key name you can use in Store
this.CART_KEY = 'CART';
this.QUEUE_KEY = 'QUEUE';
this.FOODS_KEY = 'FOODS';
}

// you can get item by store.cartItems
get cartItems () {
return JSON.parse(this.storage.getItem(this.CART_KEY));
}

// to call setter, simply "assign" like store.cartItems = something
set cartItems (cartItems) {
this.storage.setItem(this.CART_KEY, JSON.stringify(cartItems));
}

get queue () {
return JSON.parse(this.storage.getItem(this.QUEUE_KEY));
}

set queue (queue) {
this.storage.setItem(this.QUEUE_KEY, JSON.stringify(queue));
}

get foods () {
return JSON.parse(this.storage.getItem(this.FOODS_KEY));
}

set foods (foods) {
this.storage.setItem(this.FOODS_KEY, JSON.stringify(foods));
}
}

class Cart {
// take dom element into JavaScript class to attachment events
constructor(root, store) {
this.root = root;
this.store = store;
this.items = this.store.cartItems;
this.init();
}

init () {
// Render a list of items under root element
this.render();
// TODO: attach remove cart items to rendered HTML
}

destroy () {
// TODO: remove all the events attached from init
}

// remove an item from shopping cart
removeItem (item) {

// TODO: logic to remove an item from cart
// call render method when the item is removed to update view
this.render();
}

placeOrder () {
// add item to statuses in store as status "in progress"
}

addItemtoCart() {
let result = '';

for(var i = 0; i < this.store.cartItems.length; i ++){
result += `<tr><td>${this.store.cartItems[i].name }</td><td>${this.store.cartItems[i].price}</td></tr>`;

  
}
  

return result;
}

// render a list of item under root element
render () {
console.log(this.store.cartItems);
let tbody = this.root.querySelector('tbody');
let thead = this.root.querySelector('thead');
this.td = `${this.addItemtoCart()}`;
  
// using innerHTML to render a list of table row item under tbody
tbody.innerHTML = this.addItemtoCart();
  
}
}

class CheckoutButton {
constructor(root, store) {
this.root = root;
this.store = store;
this.onClick = () => this.addItemToCart();
this.init();
}

init () {
this.root.addEventListener('click', this.onClick);
}

destroy () {
}

addItemToCart () {
// hint: you can use `dataset` to access data attributes
// See passing data from HTML to JavaScript from course note
let cartItems = this.store.cartItems || [];
// TODO: replace with actual item
console.log(this.root.dataset);
cartItems.push({
name: this.root.dataset.name,
price: this.root.dataset.price
});
console.log(cartItems);
this.store.cartItems = cartItems;
}
}

class StatusTable {
// take dom element into JavaScript class to attachment events
constructor(root, store) {
this.root = root;
this.store = store;
init();
}

init () {
// attach click event listener to table header row on each column
render();
}

destroy () {
// remove all the events attached from init
}

sort (columnName) {
// after sorting the array of statuses, re render item to update view
render();
}

// render rows of items under table using root.innerHTML
render () {

}
}

// DOMContentLoaded event will allow us to run the following function when
// everything is ready. Think of the following code will only be executed by
// the end of document
document.addEventListener('DOMContentLoaded', () => {
// use querySelector to find the table element (preferably by id selector)
// let statusTable = document.querySelector('');
// // use querySelector to find the cart element (preferably by id selector)
let cart = document.querySelector('.cart-table');
let checkoutButtons = document.querySelectorAll('.checkout-button');

let store = new Store(window.localStorage);
// if (table) {
// new StatusTable(table, store);
// }
if (cart) {
new Cart(cart, store);
}
if (checkoutButtons && checkoutButtons.length) {
for (var i = 0; i < checkoutButtons.length; i ++) {
new CheckoutButton(checkoutButtons[i], store);
}
}
});

what should I do on function removeItem

help me fill it and explain it please

Explanation / Answer

/ remove an item from shopping cart
removeItem (item) {
CART = this.CART_KEY
<input type="button" class="remove-item" value="X" />// html code

if(item == this.FOOD_KEY)

{

$('#FOOD_KEY).on('click','.remove-item',function(){
    $(this).remove();
});

}

this.render();

}

For particular item to be deleted class for that item will be taken from that particular HTML code and then checked the matching food item from cart pass it in a function ()and delete the selected item from that cart using this.remove()

Related Questions

Navigate

• Browse (All)
• Browse N
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.