Question

脚本：

<img src="post/images/ex.jpg" />

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

我需要让删除按钮正常运行。当我按下侧面的相应按钮时，只有它旁边的文本框才能删除。

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

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

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

jQuery添加/删除文本框

2 个答案: