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

Your ID should be unique to the element in HTML. Then the getElementById function will only return 1. — Lee Willis
– Lee Willis, Commented Sep 19, 2014 at 8:15
You shouldn't use the quotes around divName in your del_input function. — MaxArt
– MaxArt, Commented Sep 19, 2014 at 8:16

dreamweiver · Accepted Answer · 2014-09-19 09:08:28Z

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

answered Sep 19, 2014 at 9:08

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rob Schmuecker · Accepted Answer · 2014-09-19 08:16:14Z

0

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

answered Sep 19, 2014 at 8:16

Rob Schmuecker

8,9642 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

delete an element using javascript

HTML

JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related