有很多方法可以实现这一点。下面是一小段经过修改的代码摘录，作为一个例子，并带有一些解释注解。
这种方法的基本思想是基于动态状态呈现元素，在本例中，动态状态只是一个计数器，用于控制在给定时刻呈现多少子元素。添加和删除按钮控制该计数器，并调用呈现函数以反映视图中计数器的更新状态。

// 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>