I have this check button to remove elements from the list, and whenever I press an element from the bottom of the lists it removes the whole thing, I've tried using break but it keeps executing.

This is what the code looks like:

let checkBtns = document.getElementsByClassName('checkbox-round');
      for (let i = 0; i < checkBtns.length; i++) {
        checkBtns[i].addEventListener('click', () => {
          console.log(`executing for ${i}`);
          checkBtns[i].parentNode.remove();
          tasks.splice(i, 1);
          break;
        });
      }

And here's a screenshot of the behavior in console:

• The underlined log is the normal expected behavior when I delete a node that's on top of the list
• The log under is for when I delete a node on the bottom that recursively calls itself