Question

I’ve got a form with a table with originally 1 row of input fields. Users can click the “New Row” button to get another row, with empty input fields. This leaves with me multiple copies of the “New Row” button for every Row – I would like to remove all but the most recently created “New Row” button (i.e. the one in the last row of input fields).

I’ve setup a sample JSFiddle at:

http://jsfiddle.net/fmdataweb/vRe9v/2/

Is there something I can add to the existing js that will delete the button that was clicked whilst leaving the newly created button in the new row? Here’s the Javascript:

var table = $( '#nextYear' )[0];

$( table ).delegate( '#button2', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
   $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

​

Answer 1

Use $(this).remove(); jQuery $(this) in the event of control represents the control whom event is fired on. You can use remove() method that will remove the button being click from dom

Live Demo

var table = $('#nextYear')[0];

$(table).delegate('#button2', 'click', function() {

    var thisRow = $(this).closest('tr')[0];
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val('');
    $(this).remove();
});​