Question

需要帮助单击添加按钮创建新的文本框行，然后单击删除以删除html和jquery中的行这是html

<div class="select-box">
<input type='button' value='Add Button' id='addButton'>
<input type='button'value='Remove Button' id='removeButton'>
</div>
<div class="col-lg-3">
<div class="form-group">
<input type="text" class="form-control"name="size" placeholder="Size"/>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<input type="text" class="form-control"name="clr" placeholder="Color"/>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<input type="text"name="qty" placeholder="Quantity" />
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<input type="file" class="form-control" name="img" />
</div>
</div>
</div>
</div>

Here is the img

Answer 1

试试这个

<强> HTML

<div class="text-right">
    <input type="button" class"btn btn-default" value='Add Button' id='addButton'/>
    <input type='button' value='Remove Button' id='removeButton'>
</div>
<hr/>
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="form-group">
                <input type="text" class="form-control" name="size[]" placeholder="Size" />
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <input type="text" class="form-control" name="clr[]" placeholder="Color" />
            </div>
        </div>
        <hr/>
    </div>
</div>

<强>的JavaScript

var $container = $('.container');
var $row = $('.row');
var $add = $('#addButton');
var $remove = $('#removeButton');
var $focused;

$container.on('click', 'input', function () {
    $focused = $(this);
});

$add.on('click', function () {
    var $newRow = $row.clone().insertAfter('.row:last');
    $newRow.find('input').each(function () {
        this.value = '';
    });
});

$remove.on('click', function () {
    if (!$focused) {
        alert('Select a row to delete (click en input with it)');
        return;
    }

    var $currentRow = $focused.closest('.row');
    if ($currentRow.index() === 0) {
        // don't remove first row
        alert("You can't remove first row");
    } else {
        $currentRow.remove();
        $focused=null;
    }
});

和jsfiddle（已更新）

https://jsfiddle.net/xjbks3he/2/

Answer 2

我认为你正在寻找类似下面的东西。我们的想法是，在加载时，在添加按钮的数据属性中存储第一行的副本。稍后，当您单击该按钮时，请复制该按钮并将其添加到容器中。然后只需单击“删除”按钮即可从容器中删除最后一行。

var row = $('#row-container .row:eq(0)').clone();
$('#addButton').data('row',row);
$('#addButton').click(function(){
  $('#row-container').append($(this).data('row').clone());
});
$('#removeButton').click(function(){
  $('#row-container .row').eq(  $('#row-container .row').length-1 ).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-box">
  <input type='button' value='Add Button' id='addButton'>
  <input type='button' value='Remove Button' id='removeButton'>
</div>

<div id="row-container">
<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <input type="text" class="form-control" name="size" placeholder="Size" />
    </div>
  </div>
  <div class="col-lg-3">
    <div class="form-group">
      <input type="text" class="form-control" name="clr" placeholder="Color" />
    </div>
  </div>
  <div class="col-lg-3">
    <div class="form-group">
      <input type="text" name="qty" placeholder="Quantity" />
    </div>
  </div>
  <div class="col-lg-3">
    <div class="form-group">
      <input type="file" class="form-control" name="img" />
    </div>
  </div>
</div>
</div>

Answer 3

在jQuery中，动态添加或删除文本框非常容易。这个想法很简单，只需结合使用'counter'变量，jQuery createElement（），html（）和remove（）方法。见下面的例子：

<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            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="" >');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

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

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });
</script>

如何在html Jquery

3 个答案: