CODEWITHSUNDEEP
jquery
Ahmed ilyas
Ahmed ilyas

Reputation: 5822

Clone row and remove elements then re-add

I am trying to clone a table row, which works, and then add it to a new row.

The problem I am having is I need to add some dynamic elements into the new row but this should be only for 1 row. If a new row is dynamically added, I want the previous row to remove those elements I added dynamically.

I have tried using the .remove() method but this still shows.

This is what I am doing:

var lastTableRow = $('#mainTable tr:last').clone();
lastTableRow.attr('id', 'row_' + rowIDNumericOnly);
$('#mainTable tr:last').after(lastTableRow);

// finally, add a button into this new row:

$('#row_' + rowID + ' td:nth-child(2)').append('<input type="button" ID="cmdGetName_' + rowID + '" value="Fetch CAS Name" onClick="GetName($(\'#Names_' + rowID + '__Number\').val(), ' + CAS+ ')" />');

now, when the user presses the "Add row" button, it calls the function/method above to do the same thing. At this point, I want to remove the dynamically added button "cmdGetName_" if it exists when cloned the previous row.

any ideas?

when removing, I am doing the following:

 $('#cmdGetName_' + oldRowIDNumericOnly).remove();

where oldRowIDNumericOnly is taking the last row added in the table, and getting its ID. rowIDNumericOnly is the NEW ID (from the previous table row ID and adding 1 to it)

Upvotes: 0

Views: 1041

Answers (1)

Barmar
Barmar

Reputation: 781824

Give the dynamic input a class, e.g. class="CmdGetName". Then you can do:

var oldLastTableRow = $("#mainTable tr:last");
oldLastTableRow.find(".CmdGetName").remove;
var lastTableRow = oldLastTableRow.clone();

Upvotes: 3

Related Questions