Add remove multiple HTML element using Javascript


Here is quick script for adding HTML element dynamically.Limit can be set for these element This script can add number for various HTML element.

DEMO

Filed 1

+

Filed 2

+

Script

 var count =1;
var limit = 5;
var var_name =new Array();
function addInput(divName){

     if (!var_name[divName.concat("_count")]){
      var_name[divName.concat("_count")] = 1}

     if (parseInt(var_name[divName.concat("_count")]) >= limit)  {
          alert("You have reached the limit of adding " + limit + " inputs");}
     else {
          var newdiv = document.createElement('div');
          newdiv.setAttribute("id", divName+(count+1));
          newdiv.innerHTML = "
-
";
          document.getElementById(divName).appendChild(newdiv);
          var_name[divName.concat("_count")]= parseInt(var_name[divName.concat("_count")]) +1;
          count++;
        }
}

function removeInput(divName,newdiv){
    var parentBox = document.getElementById(divName);
    var childBox = document.getElementById(newdiv);
    parentBox.removeChild(childBox);
    var_name[divName.concat("_count")]= parseInt(var_name[divName.concat("_count")])-1;
    count--;
}

HTML

+
Share

Leave a Reply

Your email address will not be published. Required fields are marked *