How to remove a specific list element on button click? C# / HTML / JS (ASP.NET MVC)

Viewed 345

I have a list of objects that is shown in a "checkout" screen as below:

enter image description here

So each row is considered an object, all being part of a basket list.

The user clicks "Add to cart" and by doing so, a list element is compiled with the respective information as can be seen above, 'Product', 'Quantity', 'Price' and 'Total'. So all i want to be able to do now is delete a specific list element, by clicking the respective "Delete" button, and ultimately remove that object (row) from the checkout table above.

Below is the ActionResult responsible for adding the relevant information (gathered from an object) into the basket list, otherwise known as 'basketList'.

public ActionResult Yacht1()
        {
            List<Yacht> yachts = GetYachtData();
            return View(yachts);
        }

        [HttpPost]
        public ActionResult Yacht1(int yachtQuantity, float yachtPrice, string yachtName)
        {
            double totalPrice = Convert.ToDouble(yachtQuantity) * Convert.ToDouble(yachtPrice);
            Basket basketList = new Basket(yachtQuantity, yachtPrice, yachtName, totalPrice);
            HomeController.basketItems.Add(basketList);
            return RedirectToAction("Yacht1");
        }
public static List<Basket> basketItems = new List<Basket>();

Below is the controller for the basket class.

public class BasketController : Controller
    {
        // GET: Basket
        public ActionResult Basket()
        {
            var itemList = HomeController.basketItems;
            return View(itemList);
        }
    }

And finally the view in which these individual row elements are displayed.

<tbody class="customBody">
            @foreach (var itemList in Model)
            {
                <tr class="customRow">
                    <td class="customData">@itemList.Name</td>
                    <td class="customData">@itemList.Quantity</td>
                    <td class="customData">@itemList.Price</td>
                    <td class="customData">@itemList.Total</td>
                    <td class="customData"><button class="btn-dark">Delete</button></td>
                </tr>
            }
        </tbody>
0 Answers
Related