title: Why is this function executing many times?
body: <p>I am making a simple budget program and  I am having some trouble with refreshing the remain budget when I delete the items in the list. The function budgetDeleteItem executes many times and I don't know why. Maybe it has something to do with it beeing inside a for loop, but I don't know how to get it out of there and still make it work.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
  &lt;h1&gt;Budget for the week&lt;/h1&gt;
  &lt;form&gt;
  
    &lt;input id= "itemName" type="text" name="itemName" value="" placeholder="name of the item" &gt;
    &lt;input id = "itemCost" type="text" name="itemCost" value="" placeholder="cost of the item"&gt;
  
  &lt;/form&gt;
  &lt;button type="button" name="button"&gt; Add new item &lt;/button&gt;
  
     &lt;ul&gt;
  
     &lt;/ul&gt;
  
    &lt;p&gt;total budget: &lt;span id= "budget"&gt; 100 &lt;/span&gt; &lt;/p&gt;
  
    &lt;/body&gt;
  
    &lt;script type="text/javascript"&gt;
  
  const button= document.querySelector("button");
  const ul= document.querySelector("ul");
  
  button.addEventListener("click", checkEntry )
  
  function checkEntry() {
    const itemName = document.getElementById("itemName").value;
    const itemCost = document.getElementById("itemCost").value;
    addItem(itemName, itemCost);
  }
  
  function addItem(itemName, itemCost){
    const li = document.createElement('li');
    li.innerHTML = ` &lt;span class= "itemName"&gt;${itemName} &lt;/span&gt;
      $ &lt;span class=itemCost&gt; ${itemCost} &lt;/span&gt;
      &lt;span class="delete"&gt; X &lt;/span&gt; `;
    ul.appendChild(li);
    deleteItem();
    budgetAddItem(itemCost);
  }
  
  function deleteItem(){
    const deleteButton = document.querySelectorAll(".delete");
    for (let i = 0; i &lt; deleteButton.length; i++) {
      deleteButton[i].addEventListener("click", function(e) {
        if (e.target.classList.contains("delete")) {
          e.target.parentElement.remove();
          budgetDeleteItem(e);
        }
      })
   }
  }
  // Refreshes the remain budget whenever you add an Item
  function budgetAddItem(itemCost){
  const budgetContent = document.getElementById("budget").textContent;
  const budgetContentParsed = parseInt(budgetContent);
  const oldBudget = document.getElementById("budget");
  const itemCostParsed = parseInt(itemCost);
  const newBudget = budgetContentParsed - itemCostParsed;
  oldBudget.innerHTML =`${newBudget}`;
  }
  
  // Refreshes the remain budget whenever you delete an Item
  function budgetDeleteItem (e) {
  const oldBudget = document.getElementById("budget");
  const budgetContent = document.getElementById("budget").textContent;
  const budgetContentParsed = parseInt(budgetContent);
  const itemCost= e.target.parentElement.querySelector(".itemCost").textContent;
  const itemCostParsed = parseInt(itemCost);
  const newBudget = budgetContentParsed + itemCostParsed;
  oldBudget.innerHTML =`${newBudget}`;
  }
  
  
  
  
    &lt;/script&gt;
  
  
  
  
  &lt;/html&gt;
  </code></pre>