Use replace() to Remove a Value from Array in LWC with RegExp

I just want to remove a value from an Array in LWC using the method replace with RegExp.

@track myList = ['a', 'b', 'c'];
@track removeValue = 'b';

if (this.myList.includes(this.removeValue)) {
   if (this.myList.indexOf(',' + this.removeValue + ',') !== -1) {
       this.myList.replace(new RegExp(',?' + this.removeValue + ',?'), ','));
  } else { 
     this.myList.replace(new RegExp(',?' + this.removeValue + ',?'), ''));
    }
}

The basic intention is to replace the value on myList and to make sure that I also remove ',' in both and keep on one ',' if it is a middle value on the list. If not a middle value then remove the value for an empty value. This is working just fine on my aura components but with LWC I'm struggling to get this done. Anyone knows how to do this operation in LWC?

UPDATE
gNerb is suggesting a solution that for this case is not working. I don't need to pass the values to somthing like this: 

<template>
<div>Items:</div>
<template for:each={subLineItems} for:item="item">
    <div key={item}>{item}</div>
</template>
<lightning-button label="Filter" onclick={handleClick}></lightning-button>


import { LightningElement, track } from 'lwc';

 export default class App extends LightningElement {

@track subLineItems = ['1', '2', '3', '4'];
@track subName = '3';

handleClick(event) {
    this.subLineItems = this.subLineItems.filter(item => item !== this.subName);
  }
 }

The code above works just fine. I need to pass 'myList' to a lightning-texarea field: 

<lightning-textarea
                name="MyList__c"
                label="My List"
                readonly
                disabled
                required
                value={myList}>
        </lightning-textarea>

On the playground it works… 🙁 .. there is something I'm missing here.

Playground Test

UPDATE

I just want to let you guys know what was the problem here and how I solved this issue. The problem was that I was receiving data from a Long text area, as you can see on the HTML. This long text area fields are not Arrays 🙁 … what you can do in to transform MyList to a variable: 

var myListToString = this.myList.toString();

// now we make a string of it
   var myListToArray = myListToString.split(',');

// now we use what gNerb was saying
   myListToArray = myListToArray.filter(value => value !== removeValue);
   myList = myListToArray;

That did it for me…

Best Answer

Someone was kind enough to show me a pretty easy way to do this in JS:

@track myList = ['a', 'b', 'c'];
@track removeValue = 'b';

this.myList = this.myList.filter(value => value !== this.removeValue);

Docs

One of the things to keep in mind is that in order for @track to work, the array has to be a new array, not just an updated one. The benefit to filter is that it will return a new array.

Copy Pasta

HTML:

<template>
    <template for:each={values} for:item="value">
        <lightning-button 
            key={value}
            variant="base" 
            label={value}
            title={value}
            onclick={handleClick} 
            class="slds-m-left_x-small">
        </lightning-button>
    </template>
</template>

JS:

import { LightningElement, track} from 'lwc';

export default class testLwc extends LightningElement {
    @track values = [
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
    ];

    handleClick(event) {
        this.values = this.values.filter(value => value !== event.target.label);
    }
}

This is minimum viable code to show how this works. I created this component and embeded into a community page and tested and works as expected.

Related Topic