You need to sign in to do that
Don't have an account?
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',
}),
);
}
}
}
Hi Josephine,
Try below Code :
HTML CODE :
JS CODE :Hope this will be helpful.
Thanks!