delete an element using javascript

Question

I wrote a script in order to add input clikking on a button and it works. I want to delete the last input created using an other button, but my script delete all element.

HTML

 <div id="dynamicInput">

      Title News 1*<br><input type="text" name="titolo[]" id="titolo_<?=$contatore?>"/><br>DescrIPTION 1* <br>
      <textarea class='textbox_studio' type='text' name='descrizione[]' value="" id="descrizione_<?=$contatore?>"></textarea><br>
      ImG News 1* <input name="logonews[]" id="logonews_<?=$contatore?>" class="textboxFile" type="file" style="margin-top:10px"/><br /> 
      <a>Attenzione: per una visualizzazione l'immagine deve avere dimensioni: larghezza:290px e una altezza154px.</a>
      <br>
      <p style="border-bottom:1px solid #78a300; width:520px;">&nbsp;</p><br>

 </div>


<input type="button" value="Add News" onClick="addInput('dynamicInput');" class="bottone" style="background-color:orange">
<input type="button" value="DELETE News" onClick="del_input('dynamicInput');" class="bottone" style="background-color:orange">

JS

   var counter = 1;
   var limit = 4;

   function addInput(divName) {
       if (counter == limit) {
           alert("limit of  " + counter + " news");
       } else {
           counter++;
           var newdiv = document.createElement('div');
           newdiv.innerHTML = "Title News " + (counter) + "* <br><input type='text' name='titolo[]' id='titolo_" + counter + "'>" + "<br>Description News " + (counter) + "* <br><textarea class='textbox_studio' type='text' name='descrizione[]' id='descrizione_" + counter + "'></textarea>" + "<br>Img News " + (counter) + "* <input name='logonews[]' id='logonews_" + counter + "' class='textboxFile' type='file' style='margin-top:10px'/><br /> <a>Attenzione: per una visualizzazione l'immagine deve avere dimensioni: larghezza:290px e una altezza154px.</a>" + "<br><p style='border-bottom:1px solid #78a300; width:520px;''>&nbsp;</p><br>";
           document.getElementById(divName).appendChild(newdiv);



       }
   }

   function del_input(divName) {

       var element = document.getElementById("divName");
       element.parentNode.removeChild(element);
       counter--;
   }

Answer 1

you can just remove the div using the id, which was created using counter value.

HTML Code:

       var newdiv = document.createElement('div');
       newdiv.id="div_"+counter;

JS code:

 function del_input() {
   var node="div_"+counter;
   var element = document.getElementById(node);
   element.parentNode.removeChild(element);
   counter--;
 }

Live Demo:

http://jsfiddle.net/dreamweiver/kh09d5jf/1/

Happy Coding :)

Answer 2

You dynamicInput is the same in both buttons. In the add function it ends up adding children to the dynamicInput and in the del function you end up deleting the entire dynamicInput div, hence all children are getting deleted.

To delete the lastChild you would do this

   function del_input(divName) {
       var element = document.getElementById(divName);
       element.removeChild(element.lastChild);
       counter--;
   }