javascript - 添加/删除表单中的输入

Question

我编码this ，但删除按钮不起作用。我在控制台中没有任何错误..

var counter = 0;    
var dataList = document.getElementById('materials');
    
    var jsonOptions = [{
                        "product": "11111",
                        "description": "description 1"
                      }, {
                        "product": "22222",
                        "description": "description 2"
                      }, {
                        "product": "33333",
                        "description": "description 3"
                      }, {
                        "product": "44444",
                        "description": "description 4"
                      }, {
                        "product": "55555",
                        "description": "description 5"
                      }]; 

    jsonOptions.forEach(function(item) {
                    
      var option = document.createElement('option');
      
      option.value = item.description;
      option.text = item.description;
      option.setAttribute('data-product', item.product);
      dataList.appendChild(option);
    });

$('#bookForm')
    // Add button click handler
    .on('change', 'input[id^="ajax"]', function() {
    
        var description = $(this).val();
        var product = $('#dataList > option[value="' + description + '"]').data('product');
        $('input[name=product-'+ $(this).attr("name").replace("description-", "") + ']').val(product);
});

    
$('#bookForm')
    // Add button click handler
    .on('click', '.addButton', function() {
        counter++;
        var $template = $('#bookTemplate'),
            $clone    = $template
                            .clone()
                            .removeClass('hide')
                            .removeAttr('id')
                            .attr('data-book-index', counter)
                            .insertBefore($template);

        // Update the name attributes
        $clone
            .find('[name="description"]').attr('name', 'description-' + counter).end()
            .find('[name="product"]').attr('name', 'product-' + counter).end();
    })

    // Remove button click handler
    .on('click', '.removeButton', function() {
        var $row  = $(this).parents('.form-group'),
            index = $row.attr('data-book-index');

        // Remove element containing the fields
        $row.remove();
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
         
    	<div id="bookForm" class="form-group">
                      <label for="inputName" class="col-md-2 col-sm-2 control-label">Υλικό / Ποσότητα</label>
                      <div class="col-md-3 col-sm-3">
                         <input type="text" id="ajax2" list="materials" class="form-control" placeholder="Υλικό" name="description-0">
                         <datalist id="materials"></datalist>
                      </div>
                     
                      <div class="col-md-3 col-sm-3">
                        <input type="number" class="form-control" name="product-0" placeholder="Ποσότητα" required="">
                      </div>
                      
                      <div class="col-xs-1">
                            <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                    
                    <div id="bookTemplate" class="form-group hide">
                      
                        <div class="col-md-3 col-sm-3 col-md-offset-2 col-sm-offset-2">
                           <input type="text" id="ajax2" list="materials" class="form-control" placeholder="Υλικό" name="description">
                           <datalist id="materials"></datalist>
                        </div>

                        <div class="col-md-3 col-sm-3">
                          <input type="number" class="form-control" name="product" placeholder="Ποσότητα" required="">
                        </div>

                       <div class="col-xs-1">
                          <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
                      </div> 
                    </div>
    
    
           
   </div>
</div>

Answer 1

问题是您要在#bookForm中选择.removeButton类，但实际上.removeButton位于#bookForm

jsFiddle

$('#bookForm')
    // Add button click handler
    .on('click', '.addButton', function() {
        counter++;
        var $template = $('#bookTemplate'),
            $clone    = $template
                            .clone()
                            .removeClass('hide')
                            .removeAttr('id')
                            .attr('data-book-index', counter)
                            .insertBefore($template);

        // Update the name attributes
        $clone
            .find('[name="description"]').attr('name', 'description-' + counter).end()
            .find('[name="product"]').attr('name', 'product-' + counter).end();
    });

    // Remove button click handler
    $("#bookForm").parent().on('click', '.removeButton', function() {
        var $row  = $(this).parents('.form-group'),
            index = $row.attr('data-book-index');

        // Remove element containing the fields
        $row.remove();
    });