如何通过ID从JSON数组中删除指定元素？（按钮传参实现）

我来给你捋捋怎么搞定这个问题——你要处理的是JavaScript对象数组（虽然提到了JSON，但示例里是直接在JS里使用的数组），需要根据元素的id属性删除对应项，不管它在数组的哪个索引位置，比如删除id=2的元素，其实有两种常用的方法，看你的需求来选：

方法1：使用filter()创建新数组（推荐，不修改原数组） #

filter()方法会遍历数组，返回一个包含所有符合条件元素的新数组，我们只需要留下id不等于目标值的元素，就相当于删除了目标元素。这种方法是纯函数，不会修改原数组，适合函数式编程或者不想破坏原数据的场景。

示例代码：

// 假设这是你的原数组
let id = 1;
let events = [
  { "id": id++, "date": "26 Mar 2018", "name": "name 1", "type": "task" },
  { "id": id++, "date": "27 Mar 2018", "name": "name 2", "type": "meeting" },
  { "id": id++, "date": "27 Mar 2018", "name": "name 3", "type": "event" }
];

// 要删除的目标ID
const targetId = 2;

// 生成删除后的新数组
const updatedEvents = events.filter(event => event.id !== targetId);

// 如果需要替换原数组，直接赋值即可
events = updatedEvents;

方法2：使用findIndex()+splice()修改原数组 #

如果你需要直接修改原数组，可以先用findIndex()找到目标元素的索引，再用splice()删除该位置的元素。注意要先判断是否找到索引（找不到会返回-1），避免报错。

示例代码：

// 原数组同上
const targetId = 2;

// 找到目标元素的索引
const targetIndex = events.findIndex(event => event.id === targetId);

// 确保找到元素后再删除
if (targetIndex !== -1) {
  // splice(索引, 删除数量)
  events.splice(targetIndex, 1);
}

点击按钮时的实际应用 #

你提到点击删除按钮时传递元素ID，那可以把删除逻辑封装成一个函数，在按钮点击事件里调用：

function deleteEventById(eventId) {
  // 这里选上面的任意一种方法
  // 方法1示例：
  events = events.filter(event => event.id !== eventId);
  
  // 或者方法2示例：
  /*
  const index = events.findIndex(e => e.id === eventId);
  if (index !== -1) {
    events.splice(index, 1);
  }
  */
  
  // 这里可以加上更新UI的逻辑，比如重新渲染列表
}

然后在按钮上绑定点击事件：

<button onclick="deleteEventById(2)">删除ID为2的元素</button>

不管目标元素在数组的索引10还是20，这两种方法都会通过id精准匹配到元素，完成删除操作。

内容的提问来源于stack exchange，提问作者Renan Aguiar