[FIXED] How do you increment and decrement numbers when new rows are added or removed?

Issue

I have a button that creates a new element each time it is pressed. Attached to each new element is a numbered label, 1,2,3,4, etc

The numbers increase by 1 each time the button is pressed.

I also have a delete button attached to each element.

Problem = every time I delete an element and add a new element, the numbers are not running in order. for example, if I deleted element 3, the list would be 1,2,4, instead of 1,2,3.

How can you add a function to update the numbered labels so they run in order and not miss out on any numbers? Thanks

/*This is the function that increases the number attached to the Bet string by 1*/

let startingNum = 5; 

function changeNum() {
    ++startingNum;
    return "Bet" + "&nbsp" + startingNum;
}    

/*This is the function to add new row when the add button is pressed*/

function addRow() {

const divBox1 = document.querySelector(".fifth-row");

const labelBox = document.createElement("LABEL");
divBox1.appendChild(labelBox);
labelBox.classList.add('labelBet');
labelBox.innerHTML = changeNum();

const inputBox = document.createElement("INPUT");
divBox1.appendChild(inputBox);
inputBox.classList.add('oddsEntry');

const divBox2 = document.createElement("DIV");
divBox1.appendChild(divBox2);
divBox2.classList.add('stakePreTotal');

const divBox3 = document.createElement("DIV");
divBox1.appendChild(divBox3);
divBox3.classList.add('liaDiv');

const btnDel = document.createElement("BUTTON");
btnDel.innerText = 'Delete';
divBox1.appendChild(btnDel);
btnDel.classList.add('deleteBtn');

/*This is the function to delete the row*/

btnDel.addEventListener("click", deteteRow); 

function deteteRow() {
divBox1.removeChild(labelBox);
divBox1.removeChild(inputBox);
divBox1.removeChild(divBox2);
divBox1.removeChild(divBox3);
divBox1.removeChild(btnDel);
}

}

Solution

There are many ways you can achieve this. Here is a small, modified excerpt of your code as an example with some explanation comments.

The basic idea of this approach is to render elements based on a dynamic state which in this case is just a counter that controls how many children are rendered at a given moment. The add and delete buttons control this counter and call the render function to reflect the updated state of the counter in the view.

// define a static starting number if needed
const startingNum = 5;

// define dynamic counter
let counter = 0;

// get ref of parent rows container
const divBox1 = document.querySelector(".fifth-row");

// increase counter when add button is clicked and render rows
document.querySelector('button')
  .addEventListener('click', function () {
    counter += 1;
    renderRows();
  });

// decrease counter when any of the delete buttons is clicked and render rows again
divBox1
  .addEventListener('click', function (e) {
    if (e.target.classList.contains('deleteBtn')) {
      counter -= 1;
      renderRows();
    }
  });

// render rows based on the state of the counter
function renderRows() {
  // calc total number of rows to render based on current counter value
  const total = (startingNum + counter) - startingNum;
  // clear container by removing children
  divBox1.innerHTML = '';

  // render rows
  for (let i = 0; i < total; i++) {
    addRow(startingNum + i);
  }
}

function addRow(rowNumber) {
  // create a container for each row
  const rowContainer = document.createElement('div');
  rowContainer.classList.add('row-container');
  divBox1.appendChild(rowContainer);

  const labelBox = document.createElement("LABEL");
  rowContainer.appendChild(labelBox);
  labelBox.classList.add('labelBet');
  
  // set the text content including the dynamic row number
  labelBox.textContent = "Bet " + rowNumber;

  const inputBox = document.createElement("INPUT");
  rowContainer.appendChild(inputBox);
  inputBox.classList.add('oddsEntry');

  const divBox2 = document.createElement("DIV");
  rowContainer.appendChild(divBox2);
  divBox2.classList.add('stakePreTotal');

  const divBox3 = document.createElement("DIV");
  rowContainer.appendChild(divBox3);
  divBox3.classList.add('liaDiv');

  const btnDel = document.createElement("BUTTON");
  btnDel.innerText = 'Delete';
  rowContainer.appendChild(btnDel);
  btnDel.classList.add('deleteBtn');
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0; 
}

button {
  padding: .3rem .5rem;
}

.rows > div.fifth-row > div {
   display: flex;
}

<div class="rows">
  <div class="fifth-row"></div>
</div>

<button type="button">add row</button>

Answered By - Mauro Aguilar

Answer Checked By - Gilberto Lyons (PHPFixing Admin)