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>

Answer 2

将每个HW放入其容器中会很棒。因为拆除整个容器要容易得多。

使用Javascript：

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

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

  // Here is my attempt at the remove function:

  removeHw.addEventListener('click', function () {
    var form = document.getElementById("assignments");
    var lastHW = form.lastChild;
      if(lastHW) {
          form.removeChild(lastHW);
      }
  });
})();

HTML：

...
  <div id="assignments">
    <!-- add HWs here -->
    <div>HW <input class="grade" type="text" size="3">/<input class="homework" type="text" size="3"></div>
    <div>HW <input class="grade" type = "text" size="3 ">/<input class="homework " type = "text " size= "3 "></div>
    <div>HW <input class="grade"  type = "text "size="3 ">/<input class="homework " type = "text " size= "3 "></div>
  </div>
...

示例：https://jsfiddle.net/61ytuoyb/

Answer 3

您是否可以尝试在分配中包装各个分配，并为每个分配添加唯一标识符？

<div id="assignments">
    <div id="assignment_1">HW etc ...</div>
    <div id="assignment_2">HW etc ...</div>
    <div id="assignment_3">HW etc ...</div>
</div>

像全局计数器变量一样使用来为每个赋值创建唯一标识符。

然后使用javascript

var idToDelete;

addHw.addEventListener('click', function () {
     idToDelete = this.id; //not sure this is how to obtain the id in pure js.
});

removeHw.addEventListener('click', function () {
    var parent = document.getElementById("assignments");
    var child = document.getElementById("assignment_" + idToDelete);
    parent.removeChild(child);
});

这是我的头顶。未经测试的代码。

如何删除div中的最后一行html行？

3 个答案: