jQuery Add / Remove Textbox

Question

script:

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

i need to make the delete button to be functional. when i pressed the corresponding button on the side only the textbox beside it will only remove.

If you want help please at least attempt to form a viable question. Don't just copy and paste the same two sentences over and over again. — Spencer Wieczorek, Feb 12 '17 at 05:11
IDs have to be unique, you can't repeat `id="removebutton"` for each button. Use a class instead. And since you're adding elements dynamically, see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements for how to add the event listener. — Barmar, Feb 12 '17 at 05:46

score 2 · Answer 1 · edited Nov 17 '17 at 21:56

You have missed a few basic things. Here is a likely solution:

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

As you are new here, please don't forget to accept an answer if that works.

score 0 · Answer 2 · answered Feb 12 '17 at 06:03

Please try this code,i hope this will helps you

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

And this is html code

<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 Add / Remove Textbox

2 Answers2