Question

你好，我是一个jquery菜鸟，我正在制作一个发票页面，并在发票上添加一个新行，但jquery代码使用“.row”，我的主页中有很多行，所以它导致冲突重复我页面上的第一行。我想我可以给容器我的行是一个ID，然后使用DOM选择容器中的最后一行来删除或添加一行。

<div class="container" id="itemrow">
    <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" />
    <button type="button" class="btn btn-primary" id="remove">Remove</button>
    <script>
        $('#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.
            });
        });
    </script>

Answer 1

您应该像这样使用选择器：

$(".row div:last")

对于remove（）：

$(".row div:last").remove();

你必须了解这是如何工作的，当你写.row：last时，你将获得所有带有“row”类的元素，然后获取最后一个元素。

当你使用“.row div：last”时，你得到的元素是“row”类，然后是其中的所有div，然后是最后一个div，这是你想得到的那个

添加/删除发票中的行

1 个答案: