jquery - 删除动态创建的表行

Question

我有下表，我正在动态添加行:

<table id="tblItems" border=2>
            <thead>
                <tr>
                    <th>Item</th>
                    <th class="numeric">Price/Ea.</th>
                    <th class="numeric">Qty.</th>
                    <th class="numeric">Total</th>
                    <th class="numeric">Edit</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                </tr>
            </tbody>
        </table>

当我添加每一行时，i 计数器会添加到自身，因此第一个 ID 将是 itemEntry1、itemEntry2 等等。 ..

添加/编辑按钮功能:

$("#addToTable").click(function() {
        i++;
        var priceText = $("#spanPrice").text();
        var toRemove = 'Each: ';
        var priceEach = priceText.replace(toRemove,'');
        var rowId = "itemEntry" + i + "";
        var strRowEntry = '<tr id="itemEntry' + i + '"><td class="rowItem">' + $("#itemChoice option:selected").text() +'</td><td class="rowItem">' + priceEach + '</td><td class="rowItem">' + $("#quantity").val() + '</td><td class="rowItem">' + $("#price").val() + '</td><td class="rowItem"><a href="#" onclick="doThis(' + rowId + ');"><img class="deleteRow" src="edit.png" border="0" id="imgEdit" /></a></td></tr>';
        $('#tblItems tr:last').after(strRowEntry);
        $("#modalNew").hide();
        //alert(strRowEntry);
        //alert($("#loginBox").height() + " " + $("#loginBox").width());
    });

function doThis(p) {
    var values = $('#'+p.id+' td').map(function(i,c){ return $(c).text(); }).get();
    //alert(p.id);
    //alert(values);
    $("#modalUpdate .modal-content .copy #itemChoice").val(values[0]);
    $("#modalUpdate .modal-content .copy #spanPrice").text("Each: " + values[1]);
    $("#modalUpdate .modal-content .copy #quantity").val(values[2]);
    $("#modalUpdate .modal-content .copy #price").val(values[3]);
    $('#modalUpdate').toggle();
    $('#modalUpdate').center();
}

我显示一个弹出窗口，用户可以在其中删除单击“编辑”按钮的行。我正在使用以下代码:

<input type="button" value="Delete Item" id="deleteItem">

$("#deleteItem").click(function(e) {
        e.preventDefault();
        alert("test");
        $("#tblItem").closest('tr').remove();
    });

它只是在 URL 的末尾添加一个 # 而不是显示警报和删除行。

这是创建的示例表的屏幕截图:

因此，如果我单击带有 Qty=11 的行的编辑按钮，它将打开一个弹出窗口，并且 Delete Item 按钮将显示给用户。当他们点击它时，应该只删除该行。

模态更新对话框:

<div id="modalUpdate">
    <div class="modal-content">
        <div class="header">
            <h2>Update Item in Your Shopping Cart</h2>
        </div>
        <div class="copy">
            <label>Item:</label>
            <select id="itemChoice">
                <option value="Wine" selected>Wine</option>
                <option value="Shot">Shot</option>
                <option value="Beer">Beer</option>
            </select>
            <br /><span id="spanPrice"></span><br /><br />

            <label>Quantity:</label>
            <input type="text" id="quantity" name="quantity" placeholder="10">

            <label>Price:</label>
            <input type="text" id="price" name="price" placeholder="$10.00">

        </div>
        <div class="cf footer">
            <input type="button" value="Cancel" id="cancelUpdate"><input type="button" value="Delete Item" id="deleteItem"><input type="button" value="Update Item" id="updateTable">
        </div>
    </div>
    <div class="overlay"></div>
</div>

我怎样才能实现我想要做的事情？

Answer 1

在将值设置为弹出时，将 data-parent 设置为删除 doThis(p) 函数中的按钮:

function doThis(p) {
    var values = $('#'+p.id+' td').map(function(i,c){ return $(c).text(); }).get();
    //alert(p.id);
    //alert(values);
    $("#modalUpdate .modal-content .copy #itemChoice").val(values[0]);
    $("#modalUpdate .modal-content .copy #spanPrice").text("Each: " + values[1]);
    $("#modalUpdate .modal-content .copy #quantity").val(values[2]);
    $("#modalUpdate .modal-content .copy #price").val(values[3]);
    $("#deleteItem").attr('data-parent',p.id);// set id here (Edit: add the '.id' to the p
    $('#modalUpdate').toggle();
    $('#modalUpdate').center();
}

您可以获取删除按钮的父 tr 并将其删除。

  $("#deleteItem").click(function(e) {
        e.preventDefault();
        alert("test");
        var parentTr = $(this).data('parent');
        $('#'+parentTr).closest('tr').remove();// change here
    });