Items are not removed from the table when clicked

Naimish

the current code is not yet working, my apology on my side for oversight sending incomplete table. here is the corrected table uses remove *.

    

        

            
Products
            
Price
            
Quantity
            
Total
            
Remove
        
    
    

        

            
 Colorful Stylish Shirt
            
R150
            

                

                    

                        
                        
                        
                    
                    
                    

                        
                            
                        
                    
                
            
            
R150
            

        
        

            
 Colorful Stylish Shirt
            
R150
            

                

                    

                        
                        
                        
                    
                    
                    

                        
                            
                        
                    
                
            
            
R150
            

        
        

            
 Colorful Stylish Shirt
            
R150
            

                

                    

                        
                        
                        
                    
                    
                    

                        
                            
                        
                    
                
            
            
R150
            

        
        

            
 Colorful Stylish Shirt
            
R150
            

                

                    

                        
                        
                        
                    
                    
                    

                        
                            
                        
                    
                
            
            
R150
            

        
        

            
 Colorful Stylish Shirt
            
R150
            

                

                    

                        
                        
                        
                    
                    
                    

                        
                            
                        
                    
                
            
            
R150
            

        
    

The problem with your code is that you are trying to remove the element from the table using the .remove() method, but this method only works on elements that are descendants of the current element. In your case, the .remove() method is being called on the .btn-remove button, which is not a descendant of the element.

To fix this, you can use the .closest() method to get the closest element to the .btn-remove button, and then use the .remove() method on that element.

Here is the updated code:

$(document).ready(function() {
  // Add to cart button click event
  $('.btn-plus').on('click', function(e) {
    e.preventDefault();
    var quantityInput = $(this).closest('.quantity').find('input');
    var quantityValue = parseInt(quantityInput.val());

    // Increase quantity value and update input
    quantityInput.val(quantityValue + 1);

    // Update cart value and total
    updateCart();
  });

  // Remove from cart button click event
  $('.btn-minus').on('click', function(e) {
    e.preventDefault();
    var quantityInput = $(this).closest('.quantity').find('input');
    var quantityValue = parseInt(quantityInput.val());

    // Decrease quantity value and update input
    if (quantityValue > 0) {
      quantityInput.val(quantityValue - 1);

      // Update cart value and total
      updateCart();
    }
  });

  // Remove button click event
  $('.btn-remove').on('click', function(e) {
    e.preventDefault();

    // Get the closest tr element to the btn-remove button
    var tr = $(this).closest('tr');

    // Remove the tr element from the table
    tr.remove();

    // Update cart value and total
    updateCart();
  });

  // Function to update cart value and total
  function updateCart() {
    var cartValue = 0;
    var cartTotal = 0;

    // Loop through each product row
    $('tbody tr').each(function() {
      var quantityInput = $(this).find('input');
      var quantity = parseInt(quantityInput.val());
      var price = parseFloat($(this).find('.align-middle:nth-child(2)').text().replace('R', ''));

      // Set cart value to the sum of all quantity values
      cartValue += quantity;

      // Calculate the total price for this row and add it to the cart total
      var rowTotal = quantity * price;
      cartTotal += rowTotal;

      // Update the total for this row
      $(this).find('.align-middle:nth-child(4)').text('R' + rowTotal.toFixed(2));
    });

    // Update cart value and total in the HTML
    $('.badge').text(cartValue);
    $('.cart-total').text('R' + cartTotal.toFixed(2));
  }

  // Initialize the cart value and total on page load
  updateCart();
});

Thanks