Removing array item on button click

Question

How do I remove an item on click? This is what I currently have:

function deleteUser(name) {
   var person = name;

   const array = ['John','Mark','Andy'];
   const index = array.indexOf(person);
   if (index > -1) {
        array.splice(index, 1);
   }
   console.log(array);
}

<button onclick="deleteUser('John')"> Delete User </button>
<button onclick="deleteUser('Mark')"> Delete User </button>
<button onclick="deleteUser('Andy')"> Delete User </button>

I can already remove value on array but I am getting different result. Ex. When I delete on a value John. I am getting ['Mark','Andy'] but when I delete Mark I am getting ['John','Andy'].

I want to remove the item on array when it is click

So you want to make an array with deletedUsers ? And whenever you delete someone you push that user into the deletedUsers array — KZander
– KZander, Commented Apr 24, 2020 at 13:30

norbitrial · Accepted Answer · 2020-04-24 13:32:36Z

1

Probably you can define the array outside of the function and using .filter() to remove items. Important thing is .filter() creates a new array so you need to reassign in your function the result. See from the documentation:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Try as the following:

let array = ['John','Mark','Andy'];

const deleteUser = name => {
   array = array.filter(e => e !== name);
   console.log(array);
}

<button onclick="deleteUser('John')"> Delete User </button>
<button onclick="deleteUser('Mark')"> Delete User </button>
<button onclick="deleteUser('Andy')"> Delete User </button>

I hope this helps!

answered Apr 24, 2020 at 13:32

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Baijens · Accepted Answer · 2020-04-24 13:48:33Z

1

You need to define the array outside the function otherwise it get reinitialized every time.

Also the filter method is a great function to do this, however if you want you can still do it with splice too as long you keep the array outside of your function.

var array = ['John','Mark','Andy'];

function deleteUser(name) {
   array = array.filter(n => n !== name);
   console.log(array);
}

<button onclick="deleteUser('John')"> Delete User John</button>
<button onclick="deleteUser('Mark')"> Delete User Mark </button>
<button onclick="deleteUser('Andy')"> Delete User Andy</button>

edited Apr 24, 2020 at 13:48

answered Apr 24, 2020 at 13:35

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

2 Comments

3limin4t0r Over a year ago

Note that the indexOf plus splice is more efficient. It doesn't create a new array and stops iterating after a single match is found. The filter solution is more readable imo. In the end it comes down to preference.

Mark Baijens Over a year ago

@3limin4t0r Good note, didn't know about the performance. Thanks.

Collectives™ on Stack Overflow

Removing array item on button click

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related