jQuery添加/删除文本框[重复]

Posted 2023-05-07

【中文标题】jQuery添加/删除文本框[重复]

【英文标题】：jQuery Add / Remove Textbox [duplicate]

【发布时间】：2017-06-30 06:39:31

【问题描述】：

脚本：

  $(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" name="button' + counter +
        '" id="removeButton' + counter + '" value="Remove Button">');
      newTextBoxDiv.appendTo("#TextBoxesGroup");


      counter++;
    );

    $("#removeButton").click(function() 

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

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


    );


  );

</script>

HTML：

<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'>

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

【问题讨论】：

如果您需要帮助，请至少尝试提出一个可行的问题。不要一遍又一遍地复制和粘贴相同的两个句子。

ID 必须是唯一的，您不能为每个按钮重复 id="removebutton"。改用一个类。由于您是动态添加元素，请参阅***.com/questions/203198/… 了解如何添加事件侦听器。

【参考方案1】：

你错过了一些基本的东西。 这是一个可能的解决方案：

$(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).attr("class", 'TextBoxDiv');

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

    counter++;
  );

  $("body").on("click", ".removeButton", function() 
    if (counter <= 2) 
      alert("No more textbox to remove");
      return false;
    

    $(this).closest('.TextBoxDiv').remove();
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

由于您是新来的，如果可行，请不要忘记接受答案。

【参考方案2】：

请试试这段代码，希望对你有帮助

$(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;
      

这是html代码

<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
    <label>Textbox #1 : </label>
    <input type='textbox' id='textbox1'>
    <input type='button' class="remove" value='Remove Button' onclick="remove(this)" id='removeButton1'>
  </div>
</div>
<input type='button' value='Add Button' id='addButton'>