Dynemic Control使用java脚本添加和删除 [英] Dynemic Control add and remove using java script

问题描述

Hii朋友



我想在我的c＃页面上动态创建一个文本框。



我已经完成了。



如下所示。



一个文本框和旁边的删除按钮文本框



现在当我按下删除按钮然后我想删除这个特定的文本框



但是我不能这样做



请帮帮我



我的代码snipet如下所示添加控件并删除控制

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

推荐答案

（ document ）。ready（ function （）{

var counter = 2 ;

(document).ready(function () { var counter = 2;

（' ＃btn_add'）。click（功能（）{

if （counter> 3 ）
{
alert（ 你只能输入2个额外数字）;
return false ;
}

// 创建文本框的代码

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）;
// 按钮
var btn_del = document .createElement（ 输入）;
btn_del.setAttribute（ type， 按钮）;
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（ 选择）;
element_drp.setAttribute（ class， 下拉）;
element_drp.options [ 0 ] = new 选项（' Home'）;
element_drp.options [ 1 ] = new 选项（' Office'）;
element_drp.options [ 2 ] = new 选项（' 个人'）;
element_drp.options [ 3 ] = new 选项（' 其他'）;
element_drp.id = con_type + counter.toString（）;
// alert（element_drp.id）;
dropdown.appendChild（element_drp ）;

// 代码超过
var array_txt =

('#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 =

（ 输入[ ID * = 't_contact']）;
var cont;

array_txt.each（ function （index）
{
cont = 这 .id;
}）;

var array_drp =

("input[id*='t_contact']"); var cont; array_txt.each(function (index) { cont = this.id; }); var array_drp =

这篇关于Dynemic Control使用java脚本添加和删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！