JavaScript如何从动态对象数组中移除用户输入的指定对象？

你已经完成了表单采集、数组入栈、列表渲染的基础逻辑，要实现精准删除单条商品，不需要复杂的键值遍历匹配，核心是给渲染出的每个列表项绑定对应数组索引作为唯一标识，点击删除时按索引操作数组后重渲染即可。

现有代码的前置调整点 #

你当前的代码有两个影响删除功能实现的小问题：

• 渲染<li>时没有加入删除按钮，且初始加载时查询的.btn节点列表无法选中后续动态生成的按钮，不需要提前全局查询删除按钮
• 每次全量重绘列表的逻辑可以复用，不用在提交和删除两个场景写重复代码

具体实现步骤 #

1. 封装公共渲染函数，渲染时给删除按钮绑定索引 #

把循环渲染列表的逻辑抽成单独函数，每个列表项内加入删除按钮，通过data-*自定义属性把当前商品在数组中的索引存在按钮上，方便后续定位：

// 抽离公共渲染函数
function renderList() {
  ul.innerHTML = "";
  for (var i = 0; i < products.length; i++) {
    ul.innerHTML += `
      <li>
        ${products[i].title} - ${products[i].desc} - ￥${products[i].price}
        <button class="delete-btn" data-index="${i}">删除</button>
      </li>
    `;
  }
}

原来的addProduct函数里，push完数据直接调用renderList()就行，替换掉原来写在函数里的循环渲染逻辑。

2. 用事件委托绑定删除逻辑 #

直接给列表父元素<ul>绑定点击事件，利用事件冒泡特性捕获子按钮的点击事件，不需要给每个生成的按钮单独绑定监听，动态新增的按钮也能正常触发：

ul.addEventListener("click", function(e) {
  // 只响应删除按钮的点击
  if (!e.target.classList.contains("delete-btn")) return;
  // 读取按钮上存的索引，转为数字类型
  const delIndex = Number(e.target.dataset.index);
  // 从数组中删除索引对应的1项
  products.splice(delIndex, 1);
  // 重新渲染最新的数组内容
  renderList();
})

按对象键值匹配删除的方案 #

如果场景需要不依赖索引，直接根据对象的属性值（比如商品名、价格）匹配删除，可以用Array.filter过滤掉符合删除条件的项，注意如果有多个属性值完全相同的对象，这种方式会把所有匹配项全部删除：

// 示例：删除title等于用户输入值的商品
const delTargetName = inputName.value;
products = products.filter(product => product.title !== delTargetName);
renderList();

内容的提问来源于stack exchange，提问作者Menna Rihan