Prevent deletion of first row

Question

I have a table where I can add/delete rows. Thing is when I delete the first one, no rows cant be added anymore. SO, I'd like to prevent deleteion of that first row. How can I do that please?

Thanks

jQuery

$(document).ready(function ($) {
    // trigger event when button is clicked
    $("button.add").click(function () {
        // add new row to table using addTableRow function
        addTableRow($("table"));
        // prevent button redirecting to new page
        return false;
    });

    // function to add a new row to a table by cloning the last row and 
    // incrementing the name and id values by 1 to make them unique
    function addTableRow(table) {
        // clone the last row in the table
        var $tr = $(table).find("tbody tr:last").clone();
        // get the name attribute for the input and select fields
        $tr.find("input,select").attr("name", function () {
            // break the field name and it's number into two parts
            var parts = this.id.match(/(\D+)(\d+)$/);
            // create a unique name for the new field by incrementing
            // the number for the previous field by 1
            return parts[1] + ++parts[2];
            // repeat for id attributes
        }).attr("id", function () {
            var parts = this.id.match(/(\D+)(\d+)$/);
            return parts[1] + ++parts[2];
        });
        // append the new row to the table
        $(table).find("tbody tr:last").after($tr);
        $tr.hide().fadeIn('slow');
        // row count
        rowCount = 0;
        $("#table tr td:first-child").text(function () {
            return ++rowCount;
        });
        // remove rows
        $(".remove_button").on("click", function () {
            $(this).parents("tr").fadeOut('slow', function () {
                $(this).remove();
                rowCount = 0;
                $("#table tr td:first-child").text(function () {
                    return ++rowCount;
                });
            });
        });
    };
});

HTML

<table id="table">
    <thead>
        <tr>
            <th width="8" scope="col">&nbsp;</th>
            <th width="131" scope="col">Roba/Usluga</th>
            <th width="144" scope="col">Jmj</th>
            <th width="144" scope="col">Qty</th>
            <th width="144" scope="col">Price</th>
            <th width="144" scope="col">Rabat</th>
            <th width="81" scope="col">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>
                <select name="sif_roba1" id="sif_roba1">
                    <option value="">Please select</option>
                    <option value="1">David Hasselhoff</option>
                    <option value="2">Michael Jackson</option>
                    <option value="3">Tina Turner</option>
                </select>
            </td>
            <td>
                <select name="idjmj1" id="idjmj1">
                    <option value="">Please select</option>
                    <option value="1">David Hasselhoff</option>
                    <option value="2">Michael Jackson</option>
                    <option value="3">Tina Turner</option>
                </select>
            </td>
            <td>
                <input name="cijena1" id="cijena1">
            </td>
            <td>
                <input name="track1" id="track1">
            </td>
            <td>
                <input name="rabat1" id="rabat1">
            </td>
            <td>
                <button type="button" class="btn remove_button">Remove</button>
            </td>
        </tr>
    </tbody>
</table>
<button type="button" class="add" onClick="clickMe();">Add</button>

DEMO http://jsfiddle.net/PBZFw/

Answer 1

Here solution, you can optimize that function to your own goal http://jsfiddle.net/PBZFw/

        $(document).ready(function ($) {
        // trigger event when button is clicked
        $("button.add").click(function () {
            // add new row to table using addTableRow function
            addTableRow($("table"));
            // prevent button redirecting to new page
            return false;

        });
        $(document).on("click", ".remove_button", removeTableRow );
        // function to add a new row to a table by cloning the last row and 
        // incrementing the name and id values by 1 to make them unique
        var rowCount = null;
        function addTableRow(table) {
            // clone the last row in the table
            var $tr = $(table).find("tbody tr:last").clone();


            // get the name attribute for the input and select fields
            $tr.find("input,select").attr("name", function () {
                // break the field name and it's number into two parts
                var parts = this.id.match(/(\D+)(\d+)$/);
                // create a unique name for the new field by incrementing
                // the number for the previous field by 1
                return parts[1] + ++parts[2];

                // repeat for id attributes
            }).attr("id", function () {
                var parts = this.id.match(/(\D+)(\d+)$/);
                return parts[1] + ++parts[2];
            });
            // append the new row to the table
            $(table).find("tbody tr:last").after($tr);
            $tr.hide().fadeIn('slow');
            // row count
            rowCount = 0;
            $("#table tr td:first-child").text(function () {
                return ++rowCount;
            });
        };

        function removeTableRow(){    
            var $tbody = $(this).parents('tbody'),
                $trLen = $tbody.find('tr').length
            if ( $trLen === 1 ) return false; 
            $(this).parents("tr").fadeOut('slow', function () {
                    $(this).remove();
                    rowCount = 0;
                console.log( rowCount );
                    $("#table tr td:first-child").text(function () {
                        return ++rowCount;
                    });
            });
        }
    });

Answer 2

You can check the length of rows:

$(".remove_button").on("click", function () {
    if ( $('#table tbody tr').length === 1 ) return;
    // ...   
});

http://jsfiddle.net/QLQRT/

The other option is using not method and first-child selector:

$(this).closest("tr").not(':first-child').fadeOut()...

Or hide the first row button using CSS:

#table tbody tr:first-child .remove_button { display: none; }