JQuery - Model Form Remove Tabel row
<p>i'm trying to use the JQuery Modal Form Widget, but i need to add an extra column with a "delete" button to delete that that table row, I've been trying for hours with examples on here of dynamically adding and removing rows,</p>

<p>Any help would be greatly appreciated.</p>

<pre><code> $(function () {
     var
     code = $("#code"),
         desc = $("#desc"),
         qty = $("#qty"),
         allFields = $([]).add(code).add(desc).add(qty),
         tips = $(".validateTips");

     function updateTips(t) {
         tips.text(t)
             .addClass("ui-state-highlight");
         setTimeout(function () {
             tips.removeClass("ui-state-highlight", 1500);
         }, 500);
     }
     $("#dialog-form").dialog({
         autoOpen: false,
         height: 300,
         width: 200,
         modal: true,
         buttons: {
             "Add Product": function () {
                 var bValid = true;
                 if (bValid) {
                     $("#users tbody").append("&lt;tr id='" + code.val() + "'&gt;" +
                         "&lt;td&gt;&lt;input type='hidden' name='code[]' value='" + code.val() + "'&gt;" + code.val() + "&lt;/td&gt;" +
                         "&lt;td&gt;&lt;input type='hidden' name='desc[]' value='" + desc.val() + "'&gt;" + desc.val() + "&lt;/td&gt;" +
                         "&lt;td&gt;&lt;input type='hidden' name='qty[]' value='" + qty.val() + "'&gt;" + qty.val() + "&lt;/td&gt;" + "&lt;td&gt;&lt;button class='remove'&gt;Remove&lt;/button&gt;&lt;/td&gt;");
                     $(this).dialog("close");
                 }
             },
             Cancel: function () {
                 $(this).dialog("close");
             }
         },
         close: function () {
             allFields.val("").removeClass("ui-state-error");
         }
     });
     $("#addproduct")
         .button()
         .click(function () {
         $("#dialog-form").dialog("open");
     });

     $("table.users button.remove").live("click", function () {
         $(this).parents("tr").remove();

     });
 });
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="dialog-form" title="Add Product"&gt;
    &lt;p class="validateTips"&gt;All form fields are required.&lt;/p&gt;
    &lt;form&gt;
        &lt;fieldset&gt;
            &lt;label for="Code"&gt;Code&lt;/label&gt;
            &lt;input type="text" name="code" id="code" class="text ui-widget-content ui-corner-all"
            /&gt;
            &lt;label for="email"&gt;Discription&lt;/label&gt;
            &lt;input type="text" name="desc" id="desc" value="" class="text ui-widget-content ui-corner-all"
            /&gt;
            &lt;label for="Qty"&gt;Quantity&lt;/label&gt;
            &lt;input type="text" name="qty" id="qty" value="" class="text ui-widget-content ui-corner-all"
            /&gt;
        &lt;/fieldset&gt;
    &lt;/form&gt;
&lt;/div&gt;
&lt;div id="users-contain" class="ui-widget"&gt;
     &lt;h1&gt;Your Products&lt;/h1&gt;

    &lt;table id="users" class="ui-widget ui-widget-content"&gt;
        &lt;thead&gt;
            &lt;tr class="ui-widget-header "&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Description&lt;/th&gt;
                &lt;th&gt;QTY&lt;/th&gt;
                &lt;th&gt;Del&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;

        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;button id="addproduct"&gt;Add Product&lt;/button&gt;
</code></pre>
