In POS on click of delete button, remove the selected item from the cart (#9428)

erpnext/accounts/page/pos/pos.js

@@ -576,11 +576,15 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 		})
 
 		$(this.numeric_keypad).find('.numeric-del').click(function(){
-			me.selected_field = $(me.wrapper).find('.selected-item').find('.' + me.numeric_id)
-			me.numeric_val = cstr(flt(me.selected_field.val())).slice(0, -1);
-			me.selected_field.val(me.numeric_val);
-			me.selected_field.trigger("change")
-			// me.render_selected_item()
+			if(me.numeric_id) {
+				me.selected_field = $(me.wrapper).find('.selected-item').find('.' + me.numeric_id)
+				me.numeric_val = cstr(flt(me.selected_field.val())).slice(0, -1);
+				me.selected_field.val(me.numeric_val);
+				me.selected_field.trigger("change")
+			} else {
+				//Remove an item from the cart, if focus is at selected item
+				me.remove_selected_item()
+			}
 		})
 
 		$(this.numeric_keypad).find('.pos-pay').click(function(){
@@ -591,6 +595,14 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 		})
 	},
 
+	remove_selected_item: function() {
+		this.remove_item = []
+		idx = $(this.wrapper).find(".pos-selected-item-action").attr("data-idx")
+		this.remove_item.push(idx)
+		this.remove_zero_qty_item()
+		this.update_paid_amount_status(false)
+	},
+
 	render_list_customers: function () {
 		var me = this;
 

erpnext/docs/user/manual/en/accounts/point-of-sale-pos-invoice.md

@@ -47,9 +47,14 @@ quantity box. These are mostly used if the same Item is purchased in bulk.
 If your product list is very long use the Search field, type the product name
 in Search box.
 
-### Removing an Item
+### Removing an Item from the Cart
 
-Set Qty as zero to remove Item from the POS invoice. There are two ways to remove an Item.
+1. Select row in the cart and clik on delete button in the numeric keypad
+  
+<img class="screenshot" alt="POS Item" src="{{docs_base_url}}/assets/img/accounts/pos_deleted_item.gif">
+
+
+2. Set Qty as zero to remove Item from the POS invoice. There are two ways to remove an Item.
 
   * If Item's Qty is 1, click on a minus sign to make it zero.
 

erpnext/public/js/pos/pos_selected_item.html

@@ -1,4 +1,4 @@
-<div class="pos-selected-item-action" data-item-code="{%= item_code %}">
+<div class="pos-selected-item-action" data-item-code="{%= item_code %}" data-idx="{%= idx %}">
 	<div class="pos-list-row">
 		<div class="cell">{{ __("Quantity") }}:</div>
 		<input type="tel" class="form-control cell pos-item-qty" value="{%= qty %}"/>