Question

在下面的代码中，这是一个发票管理系统，一个客户可能有多个订单。添加新行时，按钮添加新项可以很好地工作，但是当尝试删除它时，直到我删除第一行它才被删除。

这是表中的第一行。

th

这是在旧代码下面添加（添加新行）的代码

<tbody id="TableBody">
    <tr>
        <td style="width: 220px">
            <input type="text" class="form-control" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
        </td>
        <td>
            <input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
        </td>
        <td>
            <input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
        </td>
        <td>
            <input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
        </td>
        <td>
            <input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
        </td>
        <td>
            <button type="button" class="btn btn-danger" id="DelRow">Delete</button>
        </td>
    </tr>
</tbody>

这是删除当前行的代码，但在附加行上无法正常工作。


    $('#AddNewItem').click(function() {
    $('#TableBody').append(`
    <tr>
        <td style='width: 220px'>
            <input type='text' class='form-control' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
        </td>
        <td>
            <input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
        </td>
        <td>
            <input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
        </td>
        <td>
            <input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
        </td>
        <td>
            <input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
        </td>
        <td>
            <button type="button" class="btn btn-danger" id="DelRow">Delete</button>
        </td>
    </tr>
    `);
    });

Screenshot

感谢您的贡献。

Answer 1

使用class来标识“删除”按钮，因为id在HTML中必须是唯一的：

  <button type="button" class="btn btn-danger DelRow">Delete</button>

然后，您不应嵌套单击处理程序，而只能使用您拥有的委托处理程序。但是请注意，delegate是已弃用的方法。改用on（前两个参数颠倒了）：

$("#TableBody").on("click", ".DelRow", function () {
    $(this).closest('tr').remove();
});

$('#AddNewItem').click(function() {
    $('#TableBody').append(`
        <tr>
            <td style='width: 220px'>
                <input type='text' class='form-control' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
            </td>
            <td>
                <input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
            </td>
            <td>
                <input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
            </td>
            <td>
                <input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
            </td>
            <td>
                <input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
            </td>
            <td>
                <button type="button" class="btn btn-danger DelRow">Delete</button>
            </td>
        </tr>
    `);
});


$("#TableBody").on("click", ".DelRow", function () {
    $(this).closest('tr').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody id="TableBody">
        <tr>
            <td style="width: 220px">
                <input type="text" class="form-control" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
            </td>
            <td>
                <input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
            </td>
            <td>
                <input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
            </td>
            <td>
                <input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
            </td>
            <td>
                <input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
            </td>
            <td>
                <button type="button" class="btn btn-danger" id="DelRow">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

<button id="AddNewItem">Add New</button>

.remove（）在.append（）jQuery上无法正常工作，除了第一行

1 个答案: