javascript - 如何删除 div 中的整个最后一行 html？

Question

我基本上想要完成的是一种表单，其中可以使用一个按钮使用 javascript 动态添加整个 html 行，或者使用另一个按钮删除现有行。我可以使用添加功能，但我似乎无法弄清楚删除功能。

这是我的代码:

window.onload = function(){
  var addHw = document.getElementById("addhw");
  var removeHw = document.getElementById("removehw");

  // Here is my add function
  addHw.addEventListener('click', function () {
    var homeworkGrade = document.createElement('input');
    homeworkGrade.className = 'grade';
    homeworkGrade.type = 'text';
    homeworkGrade.size = 3;
    var overallGrade = document.createElement('homework');
    overallGrade.className = 'homework';
    overallGrade.type = 'text';
    overallGrade.size = 3;
    var form = document.getElementById("assignments");
    var r = "HW <input class=\"grade\"  type = \"text \"size=\"3 \">/<input class=\"homework \" type = \"text \" size= \"3 \"><br />";
    form.insertAdjacentHTML('beforeend',r);
  });

  // Here is my attempt at the remove function:

  removeHw.addEventListener('click', function () {
    var form = document.getElementById("assignments").lastChild;
    var hw = document.getElementById("homework");
    var grade = document.getElementById("grade");
  });
}

<form id="myForm">
  <div id="assignments">
    <!-- add HWs here -->
    HW <input class="grade" type="text" size="3">/<input class="homework" type="text" size="3"><br />
    HW <input class="grade" type = "text" size="3 ">/<input class="homework " type = "text " size= "3 "><br />
    HW <input class="grade"  type = "text "size="3 ">/<input class="homework " type = "text " size= "3 "><br />
  </div>
  <div>
    <!-- add curve here -->
    <input type="checkbox" name="curve" />Curve + 5?
  </div>
  <div id="resultsarea ">
    <p>
      <!--add buttons-->
      <button type="button" id="compute">Compute!</button>
      <button type="button" id="addhw">Add HW</button>
      <button type="button" id="removehw">Remove HW</button>
      <button type="button" id="clear">Clear</button>
    </p>
    <!-- add the results here -->
    <div id="result"></div>

  </div>
</form>

我尝试了 removeChild 并尝试删除“作业”的最后一个子项，但没有成功。如果有人想对我的代码发表评论并且它是否高效，或者提供一些有助于我进步的评论，我将不胜感激。

Answer 1

到目前为止，最简单的方法是更新您的代码，以便包装您的“HW”(例如在 span 中)，并为所有这些跨度指定一个类(例如“hw”)。如果你想让它们在不同的行中，你也可以使用 p或 div并删除 <br /> .

window.addEventListener('load', function(){
  var addHw = document.getElementById('addhw');
  var removeHw = document.getElementById('removehw');
  var hwHTML = '<div class="hw">HW <input class="grade" type="text" size="3" />/<input class="homework" type="text" size="3" /></div>';
  var form = document.getElementById("assignments");

  // Add hw.
  addHw.addEventListener('click', function () {
    // A lot of core were useless here as you only
    // use the string at the end (and it is sufficient).
    form.insertAdjacentHTML('beforeend', hwHTML);
  });

  // Remove hw.
  removeHw.addEventListener('click', function () {
    form.removeChild(form.querySelector(".hw:last-child"));
  });
});

<form id="myForm">
  <div id="assignments">
    <!-- add HWs here -->
    <div class="hw">HW <input class="grade" type="text" size="3" />/<input class="homework" type="text" size="3" /></div>
    <div class="hw">HW <input class="grade" type="text" size="3" />/<input class="homework" type="text" size="3" /></div>
    <div class="hw">HW <input class="grade" type="text" size="3" />/<input class="homework" type="text" size="3" /></div>
  </div>
  <div>
    <!-- add curve here -->
    <input type="checkbox" name="curve" />Curve + 5?
  </div>
  <div id="resultsarea ">
    <p>
      <!--add buttons-->
      <button type="button" id="compute">Compute!</button>
      <button type="button" id="addhw">Add HW</button>
      <button type="button" id="removehw">Remove HW</button>
      <button type="button" id="clear">Clear</button>
    </p>
    <!-- add the results here -->
    <div id="result"></div>

  </div>
</form>