单击按钮时删除数组项

Question

如何在点击时删除项目？ 这是我目前拥有的：

 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>

我已经可以删除数组上的值，但我得到了不同的结果。 前任。 当我删除一个值John时。 我得到['Mark','Andy']但是当我删除Mark我得到['John','Andy'] 。

我想在单击时删除数组上的项目

Answer 1

可能您可以在 function 之外定义array并使用.filter()删除项目。 重要的是.filter()创建了一个新数组，因此您需要在 function 中重新分配结果。 从文档中查看：

filter()方法创建一个新数组，其中包含通过提供的 function 实现的测试的所有元素。

尝试如下：

 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>

我希望这有帮助！

Answer 2

您需要在 function 之外定义数组，否则每次都会重新初始化。

过滤器方法也是一个很好的 function 来执行此操作，但是如果您希望您仍然可以使用拼接来执行此操作，只要您将阵列保持在 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>