Delete a dynamically created table row

Question

I have the following table which I am adding rows dynamically:

<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>

As I add each row, the i counter adds to itself, so the first ID would be itemEntry1, itemEntry2 and so forth...

Add/Edit button function:

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

I display a popup where the user can delete the row from where the EDIT button was clicked. I am using the following code:

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

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

It just adds a # at the end of the URL instead of showing the alert and deleting the row.

Here is a screenshot of a sample table created:

So if I click the edit button for the row with Qty=11 it will open a popup and the Delete Item button will be shown to the user. When they click on it that row ONLY should be deleted.

ModalUpdate dialog:

<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>

How can I achieve what I am looking to do?

Answer 1

While setting values to popup, set data-parent to delete button in doThis(p) function :

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

You can get parent tr of the delete button and remove it.

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