Remove individual td's during deleting rows using jQuery

Question

Hello all,

In my web application, I was dynamically adding/deleting rows from my HTML table using jQuery.

I had a requirement that I needed to delete individual td elements(and not entire row).

My jQuery code is as follows:

$(function () {

    /* adding new row to existing table */
    // HTML template of a row
    $("#contactInfo").each(function () {
        $("button.addCommentRow", this).live('click', function () {

            var curr_row = $(this).closest('tr');
            var html = '<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> ' + col_ninth + '</td> <td><button type="button" class="addCommentRow">+</button> <button type="button" class="deleteCommentRow">-</button> </td> </tr>';

            var newRow = $(html).insertAfter(curr_row); // add after the last
            newRow.find('.addCommentRow, .deleteCommentRow').button();
            newRow.find('.deleteCommentRow').button().click(function () {

                newRow.find("td:nth-child(9)").remove();
                newRow.find("td:nth-child(10)").remove();

            });
        });
    });
});

So, on deleting I wanted to remove the 9th and the 10th td element from my row.

The above code(only the deletion part) does not seem to work.
Any ideas/suggestions to get working will be highly appreciated.

Thanks,
Pritish.

Answer 1

I agree with Irwin. You probably want something like this:

newRow.find("td:nth-child(9)").html('');
newRow.find("td:nth-child(10)").html('');

Answer 2

you can try something like this, try the Demo : http://jsfiddle.net/HXB4Z/

HTML :

<table border=2>
    <tr>
        <td>jQuery</td>
        <td>mootools</td>
    </tr>
    <tr>
        <td>Dojo</td>
        <td>FUEL</td>
    </tr>
    <tr>
        <td>Raphael</td>
        <td>Rico</td>
    </tr>
    <tr>
        <td>SproutCore</td>
        <td>Lively Kernel</td>
    </tr>
</table>

javascript :

$(function() {
   $('tr')
       .find('td')
       .append('<input type="button" value="Delete" class="del"/>')
       .parent()//traversing to 'tr' Element
       .append('<td><input type="button" value="Delete row" class="delrow" /></td>');

    $('.del').click(function() {
       $(this).parent().remove(); //Deleting TD element
    });

    $('.delrow').click(function(){
       $(this).parent().parent().remove(); //Deleting the Row (tr) Element
    });
});