function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Josephine ButJosephine But 

How to delete a record in dynamic table

Hi,
  I am new in LWC, I have a dynamic table to add and delete rows and adding a product. Besides to delete the row, I would like to delete the corresponding record as well, does anybody has idea?

MY HTML CODE :
<template>
<lightning-card title="Create & Delete Products">
<template for:each={itemList} for:item="item" for:index="index">
<lightning-record-edit-form key={item.id} object-api-name="Product2">
<lightning-messages> </lightning-messages>
<lightning-layout multiple-rows>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
padding="around-small">
<lightning-input-field field-name="Name" variant="label-stacked" required>
</lightning-input-field>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
padding="around-small">
<lightning-input-field field-name="ProductCode" variant="label-stacked" required>
</lightning-input-field>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
padding="around-small">
<lightning-input-field field-name="Quantity__c" variant="label-stacked" required>
</lightning-input-field>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
padding="around-small">
<lightning-input-field field-name="Price__c" variant="label-stacked" required>
</lightning-input-field>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
padding="around-small">
<div class="slds-p-top_medium">
<lightning-icon icon-name="action:new" access-key={item.id} id={index}
alternative-text="Add Row" size="small" title="Add Row" onclick={addRow}>
</lightning-icon>
<lightning-icon icon-name="action:delete" access-key={item.id} id={index}
alternative-text="Delete Row" size="small" title="Delete Row" onclick={removeRow}>
</lightning-icon>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-record-edit-form>
</template>
</br>
<lightning-layout>
<div class="slds-align_absolute-center">
<lightning-button variant="success" onclick={handleSubmit} name="submit" label="Submit">
</lightning-button>
</div>
</lightning-layout>
</lightning-card>
</template>


MY JS CODE :
import { LightningElement, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class CreateDeleteProducts extends LightningElement {
keyIndex = 0;
@track itemList = [
{
id: 0
}
];
addRow() {
++this.keyIndex;
var newItem = [{ id: this.keyIndex }];
this.itemList = this.itemList.concat(newItem);
}
removeRow(event) {
if (this.itemList.length >= 2) {
this.itemList = this.itemList.filter(function (element) {
return parseInt(element.id) !== parseInt(event.target.accessKey);
});
}
}
handleSubmit() {
var isVal = true;
this.template.querySelectorAll('lightning-input-field').forEach(element => {
isVal = isVal && element.reportValidity();
});
if (isVal) {
this.template.querySelectorAll('lightning-record-edit-form').forEach(element => {
element.submit();
});
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Products created successfully',
variant: 'success',
}),
);
// Navigate to the Product home page
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Product2',
actionName: 'home',
},
});
} else {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error creating record',
message: 'Please enter all the required fields',
variant: 'error',
}),
);
}
}
}

Best Answer chosen by Josephine But
Arun Kumar 1141Arun Kumar 1141

Hi Josephine,

Try below Code :

HTML CODE :

<template>
	<lightning-card title="Create & Delete Products">
		<template for:each={itemList} for:item="item" for:index="index">
			<lightning-record-edit-form key={item.id} object-api-name="Product2" onsuccess={handleSuccess}>
				<lightning-messages> </lightning-messages>

				<lightning-layout multiple-rows>
					<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
						padding="around-small">
						<lightning-input-field field-name="Name" variant="label-stacked" required>
						</lightning-input-field>
					</lightning-layout-item>

					<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
						padding="around-small">
						<lightning-input-field field-name="ProductCode" variant="label-stacked" required>
						</lightning-input-field>
					</lightning-layout-item>

					<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
						padding="around-small">
						<lightning-input-field field-name="Quantity__c" variant="label-stacked" required>
						</lightning-input-field>
					</lightning-layout-item>

					<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
						padding="around-small">
						<lightning-input-field field-name="Price__c" variant="label-stacked" required>
						</lightning-input-field>
					</lightning-layout-item>

					<lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
						padding="around-small">
						<div class="slds-p-top_medium">
							<lightning-icon icon-name="action:new" access-key={item.id} id={index}
								alternative-text="Add Row" size="small" title="Add Row" onclick={addRow}>
							</lightning-icon>

							<lightning-icon icon-name="action:delete" access-key={item.id} id={index}
								alternative-text="Delete Row" size="small" title="Delete Row" onclick={removeRow}>
							</lightning-icon>
						</div>
					</lightning-layout-item>
				</lightning-layout>
			</lightning-record-edit-form>
		</template>
		<br>
		<lightning-layout>
			<div class="slds-align_absolute-center">
				<lightning-button variant="success" onclick={handleSubmit} name="submit" label="Submit">
				</lightning-button>
			</div>
		</lightning-layout>
	</lightning-card>
</template>
JS CODE :
import { LightningElement, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { deleteRecord } from "lightning/uiRecordApi";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class CreateDeleteProducts extends LightningElement {
    keyIndex = 0;
    @track recordIds = [];
    @track itemList = [
        {
            id: 0
        }
    ];
    addRow() {
        ++this.keyIndex;
        var newItem = [{ id: this.keyIndex }];
        this.itemList = this.itemList.concat(newItem);
    }
    removeRow(event) {
        const idToRemove = parseInt(event.target.accessKey);
        if (this.itemList.length >= 2) {
            this.itemList = this.itemList.filter(function (element) {
                return parseInt(element.id) !== parseInt(idToRemove);
            });
        }
        if (this.recordIds[idToRemove]) {
            deleteRecord(this.recordIds[idToRemove]);
        }
    }
    handleSuccess(event) {
        const recordId = event.detail.id;
        this.recordIds = this.recordIds.concat(recordId);
    }
    handleSubmit() {
        var isVal = true;
        this.template.querySelectorAll('lightning-input-field').forEach(element => {
            isVal = isVal && element.reportValidity();
        });
        if (isVal) {
            this.template.querySelectorAll('lightning-record-edit-form').forEach(element => {
                element.submit();
            });
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Products created successfully',
                    variant: 'success',
                }),
            );
            // Navigate to the Product home page
            this[NavigationMixin.Navigate]({
                type: 'standard__objectPage',
                attributes: {
                    objectApiName: 'Product2',
                    actionName: 'home',
                },
            });
        } else {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error creating record',
                    message: 'Please enter all the required fields',
                    variant: 'error',
                }),
            );
        }
    }
}

Hope this will be helpful.
Thanks!