Button to remove line item from cart

[jarreeali]

I have disabled the quantity for line item and added custom button to remove. How can I bind event to this custom button to remove line item from cart? Check my code below:

lineItem: {
					templates: {
						// Custom button template
						customButton: '<div class="{{data.classes.lineItem.customButton}}" data-line-item-id="{{data.id}}" >Remove</div>',
					},	
					contents: {
						quantity: false,
						customButton: true, 
					},
					order: [
					'image', // Optional: include image
					'title',
					'variantTitle',
					'price',
					'priceWithDiscounts',
					'quantity',
					'customButton', // Ensure custom button is in order
					],
					classes: {
						customButton: 'shopify-buy__cart-item-remove',
						},
					styles :{
						customButton: {
							'color': 'red',
							'position': 'absolute',
							'left': '80px',
							'background': 'transparent',
							'border': 'none',
							'cursor': 'pointer',
							':hover': {
							'color': 'orange'
							}
						}
					},
					DOMEvents: {
						'click .shopify-buy__cart-item-remove': function (event, target) {
							const lineItemId = target.getAttribute('data-line-item-id');

							// Fetch current checkout and remove the item
							client.checkout.fetch(checkoutId).then((checkout) => {
								const lineItemsToRemove = [{ id: lineItemId }];

								// Remove the line item
								return client.checkout.removeLineItems(checkout.id, lineItemsToRemove);
							}).then((checkout) => {
								// Update the cart UI after removal
								ui.updateComponent('cart', { checkoutId: checkout.id });
							}).catch((error) => {
								console.error('Error removing line item:', error);
							});
						}
					},

[D3VM4TT]

Hey @jarreeali

Just checking if you have found a resolution to this. I need to do the exact same thing.