add/remove input(text) on keyup of input(number)

Question

I have been cracking away at this for awhile and cant seem to get it all the way. I am trying to have it where when a user adds or removes quantity (input type number) that it will add or remove the relevent text inputs.

I know I can do this with a clicking a button or link to remove but I want this to be completely based on the value of the said number input field.

Here is my attempt which adds them correctly but does not remove once I reduce the quantity.

var x = 0;

$('.quantity').on('keyup', 'input', function() {
    var parent = $(this).closest('.quantity');

    x++;
    var name = "student-name" + x;

    $('<br>').appendTo(parent);
    $("<input type='text' value='' placeholder='Student Name' />")
     .attr("id", name)
     .attr("name", "student-name[]")
    .addClass('student-name')
     .appendTo(parent);
});


$('.quantity').on('keydown', 'input', function() {
    $(this).closest('input.student-name').remove();
});

https://jsfiddle.net/r1zqtftr/3/

Answer 1

Anyway, you can try this solution :

$('.quantity').on('keyup', 'input', function() {
   var parent = $(this).closest('.quantity'); 
   // after all, we delete all the existing created element
   // except first element(1st number field)
   parent.find('input:not(1)').nextAll().remove();
   x++;
   var name = "student-name" + x;


  for(var i = 0; i<$(this).val(); i++)
  {
     $('<br>').appendTo(parent);
     var g =  $("<input type='text' value='' placeholder='Student Name' />")
               .attr({
                 "id": name,
                 "name": "student-name[]"
               })
               .addClass('student-name')
               .appendTo(parent);

 }       
});

You can delete the remove function (keydown) since we create the input element based on the input number entered.

UPDATED

text inputs that get dynamically generated disappear

This because, we register keyup event on all input type, instead of that we need to register only to input text that have the class name with qty name like so :

// replace old code with this
$('.quantity').on('keyup', 'input.qty', function () { })

DEMO

Answer 2

Try utilizing change event , removing input , preceding br elements , comparing .length of input[type=text] elements within .quantity to value of input[type=number] element , this within change event handler

var x = 0;

$('.quantity').on('change', 'input', function () { var parent = $(this).closest('.quantity');

x++;
var name = "student-name" + x;

$('<br>').appendTo(parent);

var n = this.value;
if ($("input[type=text]", parent).length < n) {
$("<input type='text' value='' placeholder='Student Name' />")
    .attr("id", name)
    .attr("name", "student-name[]")
    .addClass('student-name')
    .before("<br>")
    .appendTo(parent);
}
  else {
  $("input[type=text]", parent).each(function(i, el) {
    if (i >= n) $(el).remove(); $("br", parent).eq(i).remove()
  })
}

});

https://jsfiddle.net/r1zqtftr/9/

Answer 3

https://jsfiddle.net/tL3oqqyy/

Code:

var x = 0;

function getUid() {
    return ++x;
}

function getStudentId() {
    return "student-name" + getUid();
}

$('.quantity').on('keyup', 'input', function() {

    var parent = $(this).closest('.quantity'); 
    var numberValue = parseInt($(this).val());

    parent.find('input:not(1)').nextAll().remove();

    for ( i=0; i < numberValue; i++)
    {
        $(parent).append('<br />');
        $(parent).append(
            $("<input type='text' value='' placeholder='Student Name' />")
            .attr("id", getStudentId())
            .attr("name", "student-name[]")
            .addClass('student-name')
        ); 
    }    

});

Answer 4

Try

$('.qty').on('change', function() {
  var $this = $(this),
    num = +$this.val() || 0,
    $parent = $this.closest('.quantity'),
    $names = $parent.find('input[name="student-name[]"]');

  if (num < $names.length) {
    $names.slice(num).prev('br').addBack().remove();
  } else {
    for (var i = $names.length; i < num; i++) {
      $('<br>').appendTo($parent);
      $("<input type='text' value='' placeholder='Student Name' />")
        .attr("name", "student-name[]")
        .addClass('student-name')
        .appendTo($parent);
    }
  }
});

.amount,
.stock {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post" class="cart">
  <table cellspacing="0" class="group_table">
    <tbody>
      <tr>
        <td>
          <div class="quantity">
            <input type="number" size="4" class="input-text qty text" title="Qty" value="0" name="quantity[332]" max="70" min="0" step="1" />
          </div>
        </td>

        <td class="label">
          <label for="product-332">
            Week 1 &ndash; Summer Workshop</label>
        </td>


        <td class="price">
          <span class="amount">$325.00</span>
          <p class="stock in-stock">In stock</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="quantity">
            <input type="number" size="4" class="input-text qty text" title="Qty" value="0" name="quantity[333]" max="70" min="0" step="1" />
          </div>
        </td>

        <td class="label">
          <label for="product-333">
            Week 2 &ndash; Summer Workshop</label>
        </td>


        <td class="price">
          <span class="amount">$325.00</span>
          <p class="stock in-stock">In stock</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="quantity">
            <input type="number" size="4" class="input-text qty text" title="Qty" value="0" name="quantity[334]" max="70" min="0" step="1" />
          </div>
        </td>

        <td class="label">
          <label for="product-334">
            Week 3 &ndash; Summer Workshop</label>
        </td>


        <td class="price">
          <span class="amount">$325.00</span>
          <p class="stock in-stock">In stock</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="quantity">
            <input type="number" size="4" class="input-text qty text" title="Qty" value="0" name="quantity[335]" max="70" min="0" step="1" />
          </div>
        </td>

        <td class="label">
          <label for="product-335">
            Week 4 &ndash; Summer Workshop</label>
        </td>


        <td class="price">
          <span class="amount">$325.00</span>
          <p class="stock in-stock">In stock</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="quantity">
            <input type="number" size="4" class="input-text qty text" title="Qty" value="0" name="quantity[336]" max="70" min="0" step="1" />
          </div>
        </td>

        <td class="label">
          <label for="product-336">
            Week 5 &ndash; Summer Workshop</label>
        </td>


        <td class="price">
          <span class="amount">$325.00</span>
          <p class="stock in-stock">In stock</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="quantity">
            <input type="number" size="4" class="input-text qty text" title="Qty" value="0" name="quantity[337]" max="70" min="0" step="1" />
          </div>
        </td>

        <td class="label">
          <label for="product-337">
            Week 6 &ndash; Summer Workshop</label>
        </td>


        <td class="price">
          <span class="amount">$325.00</span>
          <p class="stock in-stock">In stock</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="quantity">
            <input type="number" size="4" class="input-text qty text" title="Qty" value="0" name="quantity[338]" max="70" min="0" step="1" />
          </div>
        </td>

        <td class="label">
          <label for="product-338">
            Week 7 &ndash; Summer Workshop</label>
        </td>


        <td class="price">
          <span class="amount">$325.00</span>
          <p class="stock in-stock">In stock</p>
        </td>
      </tr>
    </tbody>
  </table>

  <input type="hidden" value="362" name="add-to-cart" />


  <div class="clear"></div>
  <div id="wc-deposits-options-form">
    <hr class="separator" />
    <label class="deposit-option">
      Deposit Option: <span id="deposit-amount"><span class="amount">$162.50</span></span>
      <span id="deposit-suffix">per item</span>
    </label>
    <div class="deposit-options switch-toggle switch-candy switch-woocommerce-deposits">
      <input type="radio" value="deposit" class="input-radio" checked="checked" name="deposit-radio" id="pay-deposit" />
      <label onclick="" for="pay-deposit"><span>Pay Deposit</span>
      </label>
      <input type="radio" disabled="" class="input-radio" name="deposit-radio" id="pay-full-amount" />
      <label onclick="" for="pay-full-amount"><span>Full Amount</span>
      </label>
      <a class="wc-deposits-switcher"></a>
    </div>
    <span id="wc-deposits-notice" class="deposit-message"></span>
  </div>

  <button class="single_add_to_cart_button button alt" type="submit">PAY DEPOSIT NOW</button>


</form>

<!--
<div id="myDiv">
    <input type="number" id="qty1" value="1" />
    <input type="text" id="txt_1" />
</div> -->

Answer 5

Check this fiddle

JS:

var x = 0;

$('.quantity').on('keyup', 'input', function (e) {

    if (e.which == 8) {
         $(this).parent().find('input.student-name').last().remove().end().parent().find("br").last().remove();
    } else {
        var parent = $(this).closest('.quantity');

        x++;
        var name = "student-name" + x;

        $('<br>').appendTo(parent);
        $("<input type='text' value='' placeholder='Student Name' />")
            .attr("id", name)
            .attr("name", "student-name[]")
            .addClass('student-name')
            .appendTo(parent);
    }
});