如何刪除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並嘗試刪除了“ assignments”的最后一個孩子，但是沒有運氣。 如果有人想對我的代碼發表評論，或者它有效率，或者為我提供一些有益於我的進步的評論，我將非常感謝。

Answer 1

到目前為止，最簡單的方法是更新代碼，以便將“ HW”包裝起來（例如，在span ），並為所有這些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

將每個硬件放入其容器中將是很棒的。 因為移除整個容器要容易得多。

使用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);
});

這離開了我的頭頂。 未經測試的代碼。