CODEWITHSUNDEEP
javascriptjqueryhtml-table
user982124
user982124

Reputation: 4600

Insert Table Row and Remove button from original row

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

​

Upvotes: 1

Views: 212

Answers (3)

user1978134
user1978134

Reputation:

Try this: DEMO: http://jsfiddle.net/xRQs8/2/

It can be done using single button :+

<table id="dataTable" cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                            <td>
                                                <input type="Button" value="Add More" name="AddMore" class="AddOption" />
                                            </td>
                                        </tr>
                                    </table>

Upvotes: 1

Adil
Adil

Reputation: 148110

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

Upvotes: 1

Nope
Nope

Reputation: 22329

You can use jQuery remove() which removes the set of matched elements from the DOM.

In your case as you are within the button click event, this is what references the button object in the DOM.

Turn this into a jQuery object and call remove() on it like this:

$(this).remove();

Complete new code:

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(); // remove button that was clicked
});​

See DEMO

Upvotes: 1

Related Questions