Question

我已经开始讨论这个问题了一段时间，似乎无法完全解决这个问题。我试图在用户添加或删除数量（输入类型编号）时添加或删除相关文本输入。

我知道我可以通过点击按钮或链接来删除，但我希望这完全基于所述数字输入字段的值。

这是我尝试正确添加它们但是一旦减少数量就不会删除。

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

选中此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);
    }
});

Answer 2

无论如何，你可以尝试这个解决方案：

$('.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);

 }       
});

您可以删除remove function (keydown)，因为我们根据输入的输入数字创建输入元素。

<强>已更新

动态生成的文本输入消失

这是因为，我们在所有输入类型上注册了keyup事件，而不是我们只需要注册具有qty名称的类名的输入文本，如下所示：

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

<强> DEMO

Answer 3

尝试

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

https://jsfiddle.net/tL3oqqyy/

代码：

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 5

尝试使用change事件，删除input，前br元素，将.length input[type=text]元素.quantity与input[type=number]元素进行比较{1}}元素，this change事件处理程序中的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() }) }

var x = 0;

$（＆＃39; .quantity＆＃39;）。on（＆＃39; change＆＃39;，＆＃39; input＆＃39;，function（）{ var parent = $（this）.closest（＆＃39; .quantity＆＃39;）;

opaque

}）;

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

在输入的键盘上添加/删除输入（文本）（数字）

5 个答案: