How to create lightning-pill button with remove dynamically functionality in LWC Salesforce

[vijayk3327]

in this post we are going to learn about How to create lightning-pill button with remove dynamically functionality in LWC Salesforce .

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ lwcPills.html

` `

Step 2:- Create Lightning Web Component Javascript ➡ lwcPills.js

` import { LightningElement, track, api } from 'lwc';

export default class LwcPills extends LightningElement {

@track labelItems = [
    {
        label: 'Salesforce LWC'
    }, 
    {
        label: 'Aura Lightning'
    }, 
    {
        label: 'Integration'
    },
    {
        label: 'W3web Tutorial'
    }
];

removePillItem(event) {

    const pillIndex = event.detail.index ? event.detail.index : event.detail.name;

    const itempill = this.labelItems;
    itempill.splice(pillIndex, 1);       
    this.labelItems = [...itempill];
    console.log(pillIndex, this.labelItems);
}

}`

Step 3:- Create Lightning Web Component Meta XML ➡ lwcPills.js-meta.xml

` <?xml version="1.0" encoding="UTF-8"?>

45.0 true lightning__AppPage lightning__RecordPage lightning__HomePage ` **Step 4:- Create Lightning Application : lwcPillsApp.app** ` ` **[→ Get source code live demo link:-](https://www.w3web.net/create-lightning-pill-with-remove-in-lwc/)**