无法正常删除选中项的解决方法

lhtsbb

已于 2022-05-12 22:03:28 修改

阅读量275

点赞数 1

文章标签： javascript 前端开发语言

于 2022-05-12 22:01:48 首次发布

本文链接：https://blog.csdn.net/lhtsbb/article/details/124740799

版权

本文探讨了在删除购物车商品时遇到的问题，即按正常顺序删除会导致索引错乱，从而无法正确移除所有选中商品。解决方案是反向遍历并删除，确保不会影响到剩余商品的索引。这种方法适用于表格数据操作，特别是在前端开发中。

摘要由CSDN通过智能技术生成

删除选中商品的易错点

无法正常删除选中商品

这里的原理在表格中也可以使用，这里以购物车商品为例
按以下方法，无法正常实现删除商品。
因为如果按正常顺序(let i=0开始从前往后)删除数据，删了后cks.length会发生变化。假如第一个删的是第一件商品，此时原本的第二件商品已经变成第一件商品，而索引值 i 一直在递增，便无法删除第二件商品。

//del_checked是获取删除选中商品的对象
//cks[i]是第i行商品的复选框
del_checked.addEventListener('click', function () {
    for (let i = 0; i < cks.length ; i++) {
       if (cks[i].checked) {
         // 删除购物车中的某行数据
         carBody.removeChild(carBody.children[i])
       }
    }
})

而如果从后面往前删，删除后并不影响索引 i 对应得商品数据，因此可以正常删除。修改后的代码如下（只需要修改for（）内的内容）

del_checked.addEventListener('click', function () {
    for (let i = cks.length - 1; i >= 0; i--) {
       if (cks[i].checked) {
         // 删除购物车中的某行数据
         carBody.removeChild(carBody.children[i])
       }
    }
})