Javascript jQuery添加/删除文本框

脚本：

$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器<2）{
警报（“添加更多文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'' +
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
$（“#TextBoxDiv”+计数器）.remove（）；
如果（计数器==2）{
警报（“不再需要删除文本框”）；
返回false；
}
});
});

HTML:

文本框#1：

---

我需要使删除按钮正常工作。当我按下侧面相应的按钮时，只有旁边的文本框才会被删除。

您错过了一些基本内容。 以下是一个可能的解决方案：

$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器<2）{
警报（“添加更多文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）.attr（“class”，“TextBoxDiv”）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'' +
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“body”）。在（“单击”、“删除”按钮）上，函数（）{
如果你错过了一些基本的东西。
以下是一个可能的解决方案：


$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器<2）{
警报（“添加更多文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）.attr（“class”，“TextBoxDiv”）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'' +
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“body”）。在（“单击”、“删除”按钮）上，函数（）{
如果（counter请尝试此代码，我希望这将对您有所帮助

<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
    <label>Textbox #1 : </label>
    <input type='textbox' id='textbox1'>
    <input type='button' value='Remove Button' id='removeButton'>
  </div>
</div>
<input type='button' value='Add Button' id='addButton'>

$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器<2）{
警报（“添加更多文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'' +
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
});
功能移除（obj）
{
var id=$（obj.attr（'id'）；
变量计数器=id.replace（/[^0-9]/g'，）；
$（“#TextBoxDiv”+计数器）.remove（）；
如果（计数器==2）{
警报（“不再需要删除文本框”）；
返回false；
}
}

这是html代码

$(document).ready(function() {

    var counter = 2;

    $("#addButton").click(function() {

      if (counter < 2) {
        alert("Add more textbox");
        return false;
      }

      var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);

      newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
        '<input type="text" name="textbox' + counter +
        '" id="textbox' + counter + '" value="" >' +
        '<input type="button" class="remove" name="button' + counter +
        '" id="removeButton' + counter + '" value="Remove Button" onclick="remove(this)">');
      newTextBoxDiv.appendTo("#TextBoxesGroup");


      counter++;
    });




  });

function remove(obj)
{
var id =$(obj).attr('id');
var counter =id.replace(/[^0-9]/g, '');

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

      if (counter == 2) {
        alert("No more textbox to remove");
        return false;
      }
}


文本框#1：
请尝试此代码，我希望这将对您有所帮助

<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
    <label>Textbox #1 : </label>
    <input type='textbox' id='textbox1'>
    <input type='button' value='Remove Button' id='removeButton'>
  </div>
</div>
<input type='button' value='Add Button' id='addButton'>

$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器<2）{
警报（“添加更多文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'' +
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
});
功能移除（obj）
{
var id=$（obj.attr（'id'）；
变量计数器=id.replace（/[^0-9]/g'，）；
$（“#TextBoxDiv”+计数器）.remove（）；
如果（计数器==2）{
警报（“不再需要删除文本框”）；
返回false；
}
}

这是html代码

$(document).ready(function() {

    var counter = 2;

    $("#addButton").click(function() {

      if (counter < 2) {
        alert("Add more textbox");
        return false;
      }

      var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);

      newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
        '<input type="text" name="textbox' + counter +
        '" id="textbox' + counter + '" value="" >' +
        '<input type="button" class="remove" name="button' + counter +
        '" id="removeButton' + counter + '" value="Remove Button" onclick="remove(this)">');
      newTextBoxDiv.appendTo("#TextBoxesGroup");


      counter++;
    });




  });

function remove(obj)
{
var id =$(obj).attr('id');
var counter =id.replace(/[^0-9]/g, '');

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

      if (counter == 2) {
        alert("No more textbox to remove");
        return false;
      }
}


文本框#1：
如果您需要帮助，请至少尝试形成一个可行的问题。不要只是重复复制和粘贴相同的两句话。id必须是唯一的，您不能重复
id=“removebutton”
对于每个按钮。请使用一个类。由于您正在动态添加元素，请参阅以了解如何添加事件侦听器。如果您需要帮助，请至少尝试形成一个可行的问题。不要只是重复复制和粘贴相同的两句话。id必须唯一，不能重复
id=“removebutton”
用于每个按钮。请改用类。由于您正在动态添加元素，请参阅以了解如何添加事件侦听器。