在表单中添加/删除输入

Question

我对此进行了编码，但是删除按钮不起作用。 而且我在控制台中没有任何错误..

 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

js小提琴

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

Answer 2

您需要为所有 removeButton 定义一个侦听器；

function removeButtonListener(){

    $('.removeButton').on('click', function() {
        var $row  = $(this).parents('.form-group'),
            index = $row.attr('data-book-index');
        // Remove element containing the fields
        $row.remove();
    });
}

并且在添加新行时需要调用它；

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

        removeButtonListener(); //call remove listener
    });

Answer 3

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