Dynemic Control add and remove using java script

See more:

Javascript

Hii friends

I want to create a text box dynamically on my c# page.

I have done it .

It is as below.

one text box and remove button beside to text box

now when I press remove button then I want to remove this particular text box

but I cant do this

please help me

my code snipet is as below for add control and remove control

$(document).ready(function () {

           var counter = 2;
           $('#btn_add').click(function () {

               if (counter > 3)
                   {
                       alert("You Can Enter Only 2 Extra Numbers");
                       return false;
                   }

                   //code to create text box

                   var foo = document.getElementById("fooBar");
                   var element_txt = document.createElement("input");
                   element_txt.setAttribute("type", "text");
                   var name = "text" + counter.toString();
                   element_txt.setAttribute("name", name);
                   element_txt.setAttribute("class", "textbox");
                   element_txt.id = "t_contact" + counter.toString();
                   foo.appendChild(element_txt);
                           //button
                   var btn_del = document.createElement("input");
                   btn_del.setAttribute("type", "button");
                   btn_del.setAttribute("value", "-");
                   btn_del.id = "bnt_del";
                   foo.appendChild(btn_del);

                   alert(btn_del.id);

                   var dropdown = document.getElementById("Span1");
                   var element_drp = document.createElement("select");
                   element_drp.setAttribute("class", "dropdown");
                   element_drp.options[0] = new Option('Home');
                   element_drp.options[1] = new Option('Office');
                   element_drp.options[2] = new Option('Personal');
                   element_drp.options[3] = new Option('Other');
                   element_drp.id = "con_type" + counter.toString();
                   //alert(element_drp.id);
                   dropdown.appendChild(element_drp);

                   //code over
                   var array_txt = $("input[id*='t_contact']");
                   var cont;

                   array_txt.each(function (index)
                   {
                       cont = this.id;
                   });

                   var array_drp = $("select[id*='con_type']");
                   var type;

                   array_drp.each(function()
                   {
                           type=this.id;
                   });
                   alert(type);
                   counter++;
           });
  //over dynemically creation

           //remove element
                   $('#btn_del').click(function ()
                   {
                       alert("bh");
                       var array_txt = $("input[id*='t_contact']");
                       var cont;
                       var foo = document.getElementById("fooBar");

                       array_txt.each(function (index)
                       {
                           cont = this.id;
                       });
                       foo.removeChild(document.getElementById(cont));
                       alert(cont);

                       var dropdown = document.getElementById("Span1");
                       var array_drp = $("select[id*='con_type']");
                       var type;
                       array_drp.each(function ()
                       {
                           type = this.id;
                       });
                       dropdown.removeChild(document.getElementById(type));
                       counter--;
                   });
               //over :remove Element