How to remove pills from lightning-pill-container?

Question

I believe I have identified an error in the LWC documentation for lightning-pill-container.

The javascript reads as follows:

Copying this into an org, the statement "this.items = items.splice(index, 1);" throws an error because "[items is not defined]".

import { LightningElement, track } from 'lwc';

export default class Basic extends LightningElement {
    @track items = [
        {
            label: 'a1'
        }, 
        {
            label: 'a2'
        }, 
        {
            label: 'a3'
        }
    ];

    handleItemRemove (event) {
        const name = event.detail.item.name;
        alert(name + ' pill was removed!');
        const index = event.detail.index;
        let items = this.items;
        items.splice(index, 1);
        this.items = items;
    }
}

Note that in addition to "items" not being defined, the code is wrong because splice has a side effect of modifying the array, but the return value is the removed elements.

If I rewrite the handleItemRemove function as follows, it does not throw an exception, but it also does not remove items when clicked (the alert is correctly displayed however).

handleItemRemove (event) {
    const name = event.detail.item.name;
    alert(name + ' pill was removed!');
    const index = event.detail.index;
    let items = this.items;
    items.splice(index, 1);
    this.items = items;
}

Answer 1

Replacing the offending line with one that uses filter works:

this.items = this.items.filter(item => item.name !== event.detail.item.name)