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

Question

What I basically am trying to accomplish is a form, where one can add a whole html line dynamically using javascript using one button, or remove an existing line using another. I got the add function to work, yet I cannot seem to figure out the remove function.

Here is my code:

 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> 

I tried the removeChild and tried to remove the last child of "assignments", with no luck. If someone would like to comment on my code and if it's efficient or provide me some comments that would benefit my progress, I'll be the most thankful.

Answer 1

By far the easiest way to do it is to update your code so that your "HW" are wrapped (eg in a span ), and give all of these spans a class (eg "hw"). If you want them to be in different lines anyway, you may as well use a p or a div and remove the <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

It would be great to place every HW into its container. Because removal of the whole container is much easier.

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

Example: https://jsfiddle.net/61ytuoyb/

Answer 3

Can you try wrapping the individual assignments in an assignment and add a unique identifier to each assignment ?

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

Use like a global counter variable to create the unique identifier for each assignment.

Then use the 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);
});

This off the top of my head. Untested code.