CODEWITHSUNDEEP
jqueryhtml-table
Tmac
Tmac

Reputation: 311

Delete Row From Two Separate HTML Tables With jQuery

I have a table on a page where I can click the add button on a row and it will clone the row over to two separate tables. These two separate tables both have a delete button on each row. What I'm trying to achieve is, when a user clicks the delete button on a row on either of the tables, it will delete that same row from both tables.

Here is my cloning script. As you can see, a row gets cloned over to two different tables - #platetable2 and #platetable3 - from #platetable. 

$('#platetable .addPlateItem').live('click', function (e) {
     var row = $(this).closest('tr').clone();
     var row2 = $(this).closest('tr').clone();
     row.find("input.addPlateItem")
        .attr("value", "Delete")
        .attr("class", "deletePlateItem");
     row.find("td.mfrtd")
        .remove("td.mfrtd");
     row2.find("input.addPlateItem")
        .attr("value", "Delete")
     .attr("class", "deletePlateItem");
     row2.find("td.mfrtd")
        .remove("td.mfrtd");
     row2.append('<td><input type="text" id="portionpercase" name="portionpercase" value=""></td>');
     row2.append('<td><input type="text" id="portionperserving" name="portionperserving" value=""></td>');
     row2.append('<td><select id="portionsize" name="portionsize"><option value=""></option><option value="cup">Cup</option><option value="each">Each</option><option value="gallon">Gallon</option><option value="ounce">Ounce</option><option value="pound">Pound</option><option value="quart">Quart</option><option value="tablespoon">Tablespoon</option><option value="teaspoon">Teaspoon</option></select></td>');
     row2.append('<td>$0.00</td>');
     row2.append('<td><input type="text" id="portionperserving" name="portionperserving" value=""></td>');
     row2.append('<td>%0.00</td>');
     row2.append('<td><input type="checkbox" id="activeplate" value=""></td>');
    $('#platetable2 tbody').append(row);
    $('#platetable3 tbody').append(row2);
});

Any help would be much appreciated!

Upvotes: 0

Views: 273

Answers (1)

Terry
Terry

Reputation: 66133

Simply assign the same class to the two rows that you are deleting (IDs are good, but they cannot be duplicated so it's out of the question. When you fire the click event, assuming that your delete button as the class of delete-button. You will have to store the class of the rows to be deleted somewhere - I choose to store it in the data- attribute of the delete button:

$(document).on("click", ".delete-button", function() 
{
    var rowDelete = $(this).data("row-delete");
    $("#platetable2, #platetable3").find("."+rowDelete).remove();
});

The sample HTML markup can be like this

<td class="(rowClass)">
    (content)
    <button class="delete-button" data-row-delete="(rowClass)" type="button">
        Delete
    </button>
</td>

I have made a proof-of-concept Fiddle: http://jsfiddle.net/teddyrised/hkUdE/

$(document).ready(function() 
{
    // Start counting at 0
    var rowAdd = 0;

    $("#platetable1 .add-button").click(function() 
    {
        // Create jQuery object
        var $rowClone = $(this).parents("tr").clone();

        // Remove the add button, and add the delete button. 
        // Finally, append to plate table 2 and 3
        $rowClone
            .addClass("row-add-"+rowAdd)
            .find(".button-col")
            .remove()
            .end()
            .append("<td><button type='button' class='delete-button' data-row-delete='row-add-"+rowAdd+"'>Delete</button></td>")
            .appendTo(".placetable-append"); 

        // Whenever a new row is added, increase rowAdd by 1 so that all newly added rows will have a unique class
        rowAdd++;
    });

    // Use .on() so that clicks on dynamically added delete button will be captured
    $(document).on("click", ".delete-button", function() 
    {
        // Fetch the unique rows to delete
        var rowID = $(this).data("row-delete");
        confirmDelete = confirm("Will delete: " + rowID); 
        if(confirmDelete)
        {
            $("table ."+rowID).remove();
        }
    });
});

Upvotes: 1

Related Questions