[jQuery] Validation Plugin Add Row Example

[jQuery] Validation Plugin Add Row Example


I am using the Validation plugin from http://jquery.bassistance.de/validate/demo
which is a great plugin. I just found out after browsing the docs some
more that it has the capability of dynamically adding a row of data. I
would like to know how I can remove a row of data. After several
attempts at creating a removeJoin() function, and a couple of hours of
hacking it up, I decided to join the group.
Here's the script if anyone can offer assistance:
<html>
<head>
<title>Add Queries :: Add Joins</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/
screen.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        var qTemplate = jQuery.format($("#qTemplate").val());
        function addJoin() {
            $(qTemplate(i++)).appendTo("#queryItems tbody");
        }
        var i = 1;
        // start with one row
        addJoin();
        // add more rows on click
        $("#addRow").click(addJoin);
    });
</script>
<style type="text/css">
form.cmxform { width: 50em; }
form.cmxform input.submit {
    margin-left: 0;
}
</style>
</head>
<body>
<div id="main">
<button id="addRow">Add another query to the form</button>
<textarea style="display:none" id="qTemplate">
    <tr>
        <td class='type'>
            <select name="item-type-{0}">
                <option value="">Select...</option>
                <option value="0">Learning jQuery</option>
                <option value="1">jQuery Reference Guide</option>
                <option value="2">jQuery Cookbook</option>
                <option vlaue="3">jQuery In Action</option>
                <option value="4">jQuery For Designers</option>
            </select>
        </td>
        <td class='type'>
            <select name="item-type-{0}">
                <option value="">Select...</option>
                <option value="0">Learning jQuery</option>
                <option value="1">jQuery Reference Guide</option>
                <option value="2">jQuery Cookbook</option>
                <option vlaue="3">jQuery In Action</option>
                <option value="4">jQuery For Designers</option>
            </select>
        </td>
        <td class='type'>
            <select name="item-type-{0}">
                <option value="">Select...</option>
                <option value="0">Learning jQuery</option>
                <option value="1">jQuery Reference Guide</option>
                <option value="2">jQuery Cookbook</option>
                <option vlaue="3">jQuery In Action</option>
                <option value="4">jQuery For Designers</option>
            </select>
        </td>
        <td class='type'>
            <select name="item-type-{0}">
                <option value="">Select...</option>
                <option value="0">Learning jQuery</option>
                <option value="1">jQuery Reference Guide</option>
                <option value="2">jQuery Cookbook</option>
                <option vlaue="3">jQuery In Action</option>
                <option value="4">jQuery For Designers</option>
            </select>
        </td>
    </tr>
</textarea>
<form class="cmxform" method="get" action="foo.html">
    <fieldset>
        <legend>Create Joins For Our Query</legend>
        <table id="queryItems">
            <tbody>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4"><input class="submit" type="submit"
value="Submit"/></td>
                </tr>
            </tfoot>
        </table>
    </fieldset>
</form>
</div>
</body>
</html>