# Spot the bug - #112: Card Grid

**URL:** <https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010>\
**Category:** web dev\
**Created:** [August 10, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010 "2026-08-10T07:00:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [August 10, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010/1 "2026-08-10T07:00:18Z")

</div>

My grocery list totals are off, snacks vanish somehow

```js
const groceries = [
  { item: "Apples", price: 3 },
  { item: "Bread", price: 2 },
  { item: "Chips", price: 4 },
  { item: "Soda", price: 1 }
];

function removeCheapItems(list, limit) {
  for (let i = 0; i < list.length; i++) {
    if (list[i].price < limit) {
      list.splice(i, 1);
    }
  }
  return list;
}

const result = removeCheapItems(groceries, 3);
console.log(result.map(g => g.item));

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 12, 2026, 1:50pm UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010/2 "2026-08-12T13:50:51Z")

</div>

Splice isn’t the right method for this?

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [August 12, 2026, 1:50pm UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010/3 "2026-08-12T13:50:59Z")

</div>

Fair question.

My short take is based on patterns people keep reporting in practice.

---

<div class="post-metadata">

**Author:** ![emmawalter5](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/emmawalter5/32/33266_2.png) [@emmawalter5](https://forum.kirupa.com/u/emmawalter5)\
**Post date:** [August 14, 2026, 8:15am UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010/5 "2026-08-14T08:15:20Z")

</div>

The issue is splice() while looping forward it shifts the next item into the current index, so the loop skips it. Use filter() instead:

function removeCheapItems(list, limit) {

return list.filter(g =\> g.price \>= limit);

}

This removes the cheap items without mutating the original array.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [August 14, 2026, 5:40pm UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010/6 "2026-08-14T17:40:07Z")

</div>

Hmm, an interesting approach to the grocery list. We will reveal the solution later today.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 14, 2026, 5:41pm UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010/7 "2026-08-14T17:41:38Z")

</div>

@emmawalter5 - in the future, please use the code tag as part of the response to ensure the code snippets are formatted correctly 🙂

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [August 14, 2026, 6:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010/8 "2026-08-14T18:00:11Z")

</div>

**Spot the Bug answer:** The loop does not correctly iterate over the list after an item is removed.

**The fix:**  
Decrement the loop counter ‘i’ after splicing an item: ‘i–;’.

**Why:**  
When an item is removed using ‘splice’, the array length decreases and subsequent elements shift their indices. If ‘i’ is not decremented, the next element in the original sequence is skipped because the loop counter advances past its new position.

* * *

**Got it:** @adnanahmed, @emmawalter5

**First:** @adnanahmed 🏆

**First-answer leaderboard**

1. @kirupa - 3 (firsts) 🏆
2. @adnanahmed - 1 (first)
3. @emmawalter5 - 1 (first)

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [August 14, 2026, 8:40pm UTC](https://forum.kirupa.com/t/spot-the-bug-112-card-grid/683010/9 "2026-08-14T20:40:19Z")

</div>

The backward iteration approach, while functionally correct for mutating arrays in place, introduces a slightly higher cognitive load for maintainability compared to `filter()`. I found a related [kirupa.com](http://kirupa.com) article that can help you go deeper into this topic: [Removing Elements From Array](https://www.kirupa.com/html5/removing_elements_from_array.htm)