Попытка удалить каждую строку HTML-элемента, используя только что созданную кнопку - PullRequest
Новая
       29

Попытка удалить каждую строку HTML-элемента, используя только что созданную кнопку

0 голосов
/ 25 мая 2018 

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>

Привет, это бюджетный трекер, который я сделал для практики JavaScript.Поэтому всякий раз, когда пользователи вводят описание, сумму и нажимают кнопку «Отправить», список будет отображаться вместе с кнопкой удаления, которая удаляет каждую строку.Как мне подойти к этому методу?Поскольку кнопка создается вновь с помощью createElement, я не знаю, как сделать это обработчиком ... Спасибо.

1 Ответ

0 голосов
/ 25 мая 2018

Добавьте контейнер строк вместо конкатенации к строке HTML, и затем вы можете присоединить слушатель к кнопке, которая вызывает .remove() в строке.

Часто хорошей идеей является избегать назначения innerHTML когда это возможно - это повредит все существующие ссылки Javascript на любые элементы внутри.Если вы хотите назначить только текст, используйте textContent вместо innerHTML или createTextNode.(это быстрее, безопаснее и более предсказуемо) 

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