使用javascript删除元素

时间:2014-09-19 08:11:20

标签: javascript jquery html

我编写了一个脚本,以便在按钮上添加输入clikking并且它可以工作。我想删除使用其他按钮创建的最后一个输入,但我的脚本会删除所有元素。

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

2 个答案:

答案 0 :(得分:1)

你可以使用id来删除div,id是使用计数器值创建的。

HTML代码:

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

JS代码:

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

现场演示:

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

快乐编码:)

答案 1 :(得分:0)

两个按钮中的dynamicInput相同。在add函数中,它最终会将子项添加到dynamicInputdel函数中,最终会删除整个dynamicInput div,因此所有子项都会被删除。< / p>

要删除lastChild,您可以执行此操作

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