Question

大家好，我是一个jquery菜鸟，我正在制作一个发票页面，并在发票上添加了一个新行，但是当我点击删除按钮时，它将删除第一个行而不是最后一行。有没有办法在我添加（克隆）第一行时重命名行id，并且能够先删除最新的行？继承我的代码

<div class="container">
<div class="row" id="addrow">
<div class="col-md-2">
<input type="text" placeholder="Item #1" class="form-control" />
</div>
<div class="col-md-6">
<input type="text" placeholder="Description" class="form-control" />
</div>
<div class="col-md-1">
<input type="text" placeholder="Qty." class="form-control" />
</div>
<div class="col-md-1">
<input type="text" placeholder="Tax" class="form-control" />
</div>
<div class="col-md-2">
<input type="text" placeholder="Item Total" class="form-control" />
</div>
</div>
<input type='button' id='add' value='Add item' class="btn btn-success"/>
<script>
$('#add').click(function () {
var n = $('#addrow').length + 1;
var temp = $('#addrow:first').clone();
$('input:first', temp).attr('placeholder', 'Item #' + n)
$('#addrow:last').after(temp);
});
</script>


<button type="button" class="btn btn-primary" id="remove">Remove</button>
<script>
$(document).ready(function(){
$("#remove").click(function(){
$("#addrow").remove();
});
});

</script>

Answer 1

尽可能使用class或data-attrbiutes等常用参数。常见的ID无效。

检查此代码，

$('#add').click(function () {
    var n = $('.row').length + 1;
    var temp = $('.row:first').clone();

    temp.attr('id', temp.attr('id') + n);       //avoiding duplicate ID

    $('input:first', temp).attr('placeholder', 'Item #' + n)
    $('.row:last').after(temp);
});

$(document).ready(function () {
    $("#remove").click(function () {
        $(".row:last").remove();               //Remove section.
    });
});

Demo

Answer 2

如果你可以使用我的样本

see my Code sample

＆＃13;

var editableProducts = {

  options: {
    table: "#tableSocProducts"
  },
  initialize: function() {
    this
      .setVars()
      .events();
  },
  setVars: function() {
    this.$table = $(this.options.table);
    this.$totalLines = $(this.options.table).find('tr').length - 1;
    return this;
  },
  updateLines: function() {
    var totalLines = $(this.options.table).find('tr').length - 1;
    if (totalLines <= 1) {
      $('.remove').hide();
      $('.add').show();
    }

    return this;
  },
  events: function() {
    var _self = this;

    _self.updateLines();

    this.$table
      .on('click', 'button.add', function(e) {
        e.preventDefault();
        //---------------------------------------

        var $tr = $(this).closest('tr');
        var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);

        if (_self.setVars().$totalLines > 1) {
          $('.remove').show();
        }

        $tr.find('.add').hide();

      })
      .on('click', 'button.remove', function(e) {
        e.preventDefault();
        //---------------------------------------

        var $tr = $(this).closest('tr')
        $tr.remove();

        if (_self.setVars().$totalLines <= 1) {
          $('.remove').hide();
          $('.add').show();
        }
        //if have delete last button with button add visible, add another button to last tr
        if (_self.setVars().$totalLines > 1) {
          _self.$table.find('tr:last').find('.add').show();
        }

      });

    return this;
  }
};

$(function() {
  editableProducts.initialize();
});

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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="table-responsive">
  <table class="table" id="tableSocProducts">
    <thead>
      <tr>
        <td class="text-weight-semibold">Descrição</td>
        <td class="text-weight-semibold">Qtd</td>
        <td class="text-weight-semibold">Preço Unitário</td>
        <td class="text-weight-semibold">Valor Total</td>
        <td class="text-weight-semibold">#</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <div class="">
            <button id="addNewItem" name="addNewItem" type="button" class="btn btn-success add"><i style="color:#fff" class="fa fa-plus-circle"></i></button>
            <button id="removeItem" name="removeItem" type="button" class="btn btn-danger remove"><i style="color:#fff;" class="fa fa-trash-o"></i></button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

从发票页面添加/删除行

2 个答案:

Demo