尝试使用新创建的按钮删除每一行 HTML 元素

Question

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新建的，我不知道如何让它成为一个处理程序...谢谢。

Answer 1

附加一个行容器而不是连接到 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>

尝试使用新创建的按钮删除每一行 HTML 元素

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

html

javascript

innerhtml

createtextnode

createelement