如何使用jquery逐个删除动态创建的文本框 [英] How to remove dynamically created textboxes one by one using jquery

问题描述

我有动态创建的文本框。工作正常，Bow我想删除最后创建的行（TextBox）。

I have textboxes which creating dynamically.It working fine,Bow I want to remove the last created row (TextBox) .

  $(document).ready(function () {
        var counter = 2;
        $("#addButton").click(function () {
//            if (counter > 10) {
//                alert("Only 10 textboxes allow");
//                return false;
//            }
                var str='<label style="padding-left: 25px;"><%=GetGlobalResourceObject("ResLanguage", "Width") + "*"%>   </label>' +
                  '<input type="text" style="width: 75px; margin-left: 40px;" TextMode="SingleLine" class="txtBox"  placeholder="cm" >' 
                  
                  + '<label style="margin-left: 20px;"><%=GetGlobalResourceObject("ResLanguage", "Height") + "*"%> </label>' +
                  '<input type="text" style="width: 75px; margin-left: 44px; " name="textbox' + counter +
                  '" id="txtHeight' + counter + '" value="" class="txtBox" >' 
                  
                  + '<label style="margin-left: 24px;"><%=GetGlobalResourceObject("ResLanguage", "Lenght") + "*"%>  </label>' +
                  '<input type="text" style="width: 75px;margin-left: 40px;" placeholder="cm" TextMode="SingleLine" name="textbox' + counter +
                  '" id="txtLength' + counter + '" value="" class="txtBox" >' 
                  
                  + '<label style="margin-left: 24px; clear: both"><%=GetGlobalResourceObject("ResLanguage", "Weight") + "*"%> </label>' +
                  '<input type="text" TextMode="SingleLine" style="width: 75px;margin-left: 38px;"  name="textbox' + counter +
                  '" id="txtWeight' + counter + '" value="" class="txtBox" placeholder="kg" > '+ "<br />" + "<br />";
                    $("#TextBoxesGroup").append(str);
            counter++;
        });

        $("#removeButton").click(function () {
        alert(counter);
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;

            $("#TextBoxDiv1" + counter).remove();

        });

        $("#getButtonValue").click(function () {
            var msg = '';
            for (i = 1; i < counter; i++) {
                msg += "\n Width #" + i + " : " + $('#txtWidth' + i).val();
                msg += "\n Height #" + i + " : " + $('#txtHeight' + i).val();
                msg += "\n Length #" + i + " : " + $('#txtLength' + i).val();
                msg += "\n Weight #" + i + " : " + $('#txtWeight' + i).val();
            }
            alert(msg);
        });
    });

// html

-------------

//html
-------------

<div id='TextBoxesGroup' style="border: 1px solid; overflow-y: auto; height: 90px; border-radius: 5px; border-color: #ccc;padding-removed 10px; margin-removed 10px; margin-removed -30;width: 800px; font: Arial; font-size: small;">
	                 <div id="TextBoxDiv1">

</div>
                   <input type='button' value='+' id='addButton' class="btnNew"  style="float: right">
                    <input type='button' value='-' id='removeButton' style="float: right" class="btnNew">
                    <input type='button' value='Get' id='getButtonValue'>

删除功能不工作..请帮助我..

The Remove function is not working..please help me..

推荐答案

（document）.ready（function（）{
var counter = 2;

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

（＃addButton）。click（function（）{
// if（counter> 10）{
// alert（只有10个文本框允许）;
//返回false;
//}
var str ='< label style =padding-left：25px;><％= GetGlobalResourceObject（ResLanguage，宽度）+*％>< / label>'+
'< input type =textstyle =width：75px; margin-left：40px;TextMode =SingleLine类=txtBox占位符=cm>'

+'< label style =margin-left：20px;><％= GetGlobalResourceObject（ResLanguage，Height ）+*％>< / label>'+
'< input type =textstyle =width：75px; margin-left：44px; name =textbox'+ counter +
'id =txtHeight'+ counter +'value =class =txtBox>'

+'< label style =margin-left：24px;><％= GetGlobalResourceObject（ResLanguage，Lenght）+*％>< / label> ; +
'< input type =textstyle =width：75px; margin-left：40px;placeholder =cmTextMode =SingleLinename =textbox'+ counter +
'id =txtLength'+ counter +'value =class =txtBox>'

+'< label style =margin-left：24px; clear：><％= GetGlobalResourceObject（ResLanguage，Weight）+*％>< / label>' +
'< input type =textTextMode =SingleLinestyle =width：75px; margin-left：38px;name =textbox'+ counter +
'id = txtWeight'+ counter +'value =class =txtBoxplaceholder =kg>'+< br />+< br />;

("#addButton").click(function () { // if (counter > 10) { // alert("Only 10 textboxes allow"); // return false; // } var str='<label style="padding-left: 25px;"><%=GetGlobalResourceObject("ResLanguage", "Width") + "*"%> </label>' + '<input type="text" style="width: 75px; margin-left: 40px;" TextMode="SingleLine" class="txtBox" placeholder="cm" >' + '<label style="margin-left: 20px;"><%=GetGlobalResourceObject("ResLanguage", "Height") + "*"%> </label>' + '<input type="text" style="width: 75px; margin-left: 44px; " name="textbox' + counter + '" id="txtHeight' + counter + '" value="" class="txtBox" >' + '<label style="margin-left: 24px;"><%=GetGlobalResourceObject("ResLanguage", "Lenght") + "*"%> </label>' + '<input type="text" style="width: 75px;margin-left: 40px;" placeholder="cm" TextMode="SingleLine" name="textbox' + counter + '" id="txtLength' + counter + '" value="" class="txtBox" >' + '<label style="margin-left: 24px; clear: both"><%=GetGlobalResourceObject("ResLanguage", "Weight") + "*"%> </label>' + '<input type="text" TextMode="SingleLine" style="width: 75px;margin-left: 38px;" name="textbox' + counter + '" id="txtWeight' + counter + '" value="" class="txtBox" placeholder="kg" > '+ "<br />" + "<br />";

（＃TextBoxesGroup）。append（str）;
counter ++;
}）;

("#TextBoxesGroup").append(str); counter++; });

这篇关于如何使用jquery逐个删除动态创建的文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！