javascripthtmlinnerhtmlcreateelementcreatetextnode

Trying to remove each line of HTML element using a newly created button

var Operator = document.getElementById("operation");
var Desc = document.getElementById("description");
var Amount = document.getElementById("value");

var budget = 0.00;
var income = 0.00;
var expenses = 0.00;

var IncomeList = document.getElementById("incomeList");
var ExpenseList = document.getElementById("expenseList");


document.getElementById("submit").addEventListener("click", function() {

  var DButton = document.createElement("button");
  var t = document.createTextNode("Delete");
  //document.body.appendChild(DButton);
  DButton.appendChild(t);
  // Converts the fake (non-existant)numbers into real (functionable) numbers 
  var aValue = parseFloat(Amount.value);
  // if the operator is +, budget and income will increase by whatever you type in the value
  if (Operator.value == "+") {
    budget = budget += aValue;
    income = income += aValue;
    // The value that was typed along with description in will appear in the Income list in each line
    IncomeList.innerHTML = IncomeList.innerHTML + Desc.value + ": " + aValue;
    IncomeList.appendChild(DButton);
    IncomeList.innerHTML = IncomeList.innerHTML + "<br>";


  } else {
    budget = budget -= aValue;
    expenses = expenses -= aValue;
    ExpenseList.innerHTML = ExpenseList.innerHTML + Desc.value + ": " + aValue;
    ExpenseList.appendChild(DButton);
    ExpenseList.innerHTML = ExpenseList.innerHTML + "<br>";

  }
  // Declaring statements to make it easier to input
  document.getElementById("budget").innerText = budget;
  document.getElementById("incomeTotal").innerText = income;
  document.getElementById("expenseTotal").innerText = expenses;
});
<div id="wrapper">
  <div id="top">
    <p id="day">Available Budget in January 2018:</p>
    <p id="budget">0.00</p>
    <div id="income" class="highlight">
      <h1>Income</h1>
      <p id="incomeTotal">+0.00</p>
    </div>
    <div id="expenses" class="highlight">
      <h1>Expenses</h1>
      <p id="expenseTotal">-0.00</p>
    </div>
  </div>

  <div id="controls">
    <select id="operation">
      <option>+</option>
      <option>-</option>
    </select>

    <input type="text" placeholder="Add description" id="description" required/>

    <input type="number" min="1" placeholder="Value" id="value" />
    <button id="submit">&#10003;</button>
  </div>

  <div id="content">
    <div id="incomeList">
      <p>INCOME</p>
    </div>
    <div id="expenseList">
      <p>EXPENSES</p>
    </div>
  </div>
</div>

Hi, this is a budget tracker I made to practice JavaScript. So whenever users type a description and an amount and press submit, the list will show up along with a delete button that erases each line. How should I approach this method? Because the button is newly created by createElement, I do not know how to make this a handler...Thank you.

Solution

  • Append a row container instead of concatenating to the HTML string, and then you can attach a listener to the button that calls .remove() on the row.

    It's often a good idea to avoid assigning to innerHTML when possible - it will corrupt all existing Javascript references to any elements inside. If you want to assign text alone, use textContent rather than innerHTML or createTextNode. (it's faster, safer, and more predictable)

    var Operator = document.getElementById("operation");
var Desc = document.getElementById("description");
var Amount = document.getElementById("value");

var budget = 0.00;
var income = 0.00;
var expenses = 0.00;

var incomeList = document.getElementById("incomeList");
var expenseList = document.getElementById("expenseList");


document.getElementById("submit").addEventListener("click", function() {
  const parent = Operator.value === "+" ? incomeList : expenseList;
  const row = parent.appendChild(document.createElement('div'));

  var DButton = row.appendChild(document.createElement("button"));
  DButton.textContent = 'delete';
  DButton.onclick = () => row.remove();
  var aValue = parseFloat(Amount.value);
  row.appendChild(document.createTextNode(Desc.value + ": " + aValue));
  if (Operator.value == "+") {
    budget = budget += aValue;
    income = income += aValue;
  } else {
    budget = budget -= aValue;
    expenses = expenses -= aValue;
  }
  // Declaring statements to make it easier to input
  document.getElementById("budget").innerText = budget; document.getElementById("incomeTotal").innerText = income; document.getElementById("expenseTotal").innerText = expenses;
});
    <div id="wrapper">
  <div id="top">
    <p id="day">Available Budget in January 2018:</p>
    <p id="budget">0.00</p>
    <div id="income" class="highlight">
      <h1>Income</h1>
      <p id="incomeTotal">+0.00</p>
    </div>
    <div id="expenses" class="highlight">
      <h1>Expenses</h1>
      <p id="expenseTotal">-0.00</p>
    </div>
  </div>

  <div id="controls">
    <select id="operation">
      <option>+</option>
      <option>-</option>
    </select>

    <input type="text" placeholder="Add description" id="description" required/>

    <input type="number" min="1" placeholder="Value" id="value" />
    <button id="submit">&#10003;</button>
  </div>

  <div id="content">
    <div id="incomeList">
      <p>INCOME</p>
    </div>
    <div id="expenseList">
      <p>EXPENSES</p>
    </div>
  </div>
</div>