jQuery to delete dynamically generated li on right click
<p>I have a website that needs to be able to create favorites by adding &amp; deleting. I'm using the jQuery's mousedown and contextMenu to get me this far; but I can't get the li deleted/removed. After the li is deleted, I need to update the database. The generated ul/li looks like this:</p>

<pre><code>&lt;div id="ctl00_updt_pnl"&gt;
    &lt;ul id="ctl00_ul_0_button"&gt;
        &lt;li id="ctl00_li_0_button"&gt;&lt;a href="#" id="ctl00_a_0"&gt;myFavorites&lt;!--[if gt IE 6]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;&lt;!--[if lt IE 7]&gt;&lt;table border="0" cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
            &lt;ul id="ctl00_ul_1_button"&gt;
                &lt;li id="ctl00_li_1_button_1" class="right"&gt;
                    &lt;div id="ctl00_Panel_1" style="width:300px;"&gt;&lt;input type="submit" name="ctl00$add_myFavorites" value="Add to myFavorites..." id="ctl00_add_myFavorites" class="right" style="color:Black;font-size:9pt;font-weight:bold;width:130px;float:left;" /&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;img title="Click to View How to use" class="right_openmenu" src="Scripts/jQuery_ContextMenu/images/lightning.png" alt="How to use Menu" style="border-width:0px;margin:0 25px 0 0;" /&gt;
                    &lt;/div&gt;
                &lt;/li&gt;

                &lt;div&gt;
                    &lt;li class="right_li" id="li_49"&gt;&lt;a class="right_li_href" href=""&gt;&amp;nbsp;test 11-28 #18&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="right_li" id="li_50"&gt;&lt;a class="right_li_href" href=""&gt;&amp;nbsp;test 11-28 #19&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="right_li" id="li_51"&gt;&lt;a class="right_li_href" href=""&gt;&amp;nbsp;test 11-28 #20&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="right_li" id="li_52"&gt;&lt;a class="right_li_href" href=""&gt;&amp;nbsp;test 11-28 #21&lt;/a&gt;&lt;/li&gt;
                &lt;/div&gt;
            &lt;/ul&gt;&lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="ctl00_Panel_2" class="div_hf_favorite_name_css"&gt;
        &lt;input type="submit" name="ctl00$ButtonHiddenDeleteFavorite" value="ButtonHiddenDeleteFavorite" id="ctl00_ButtonHiddenDeleteFavorite" class="css_deleteFavorite" style="display:none;" /&gt;&lt;input type="hidden" name="ctl00$id_hf_favorite_name" id="ctl00_id_hf_favorite_name" value="0" /&gt;
    &lt;/div&gt;
    &lt;div id="ctl00_Panel_3" class="div_hf_li_to_be_deleted_css"&gt;
        &lt;input type="hidden" name="ctl00$id_hf_li_to_be_deleted" id="ctl00_id_hf_li_to_be_deleted" /&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My jQuery code is as follows: </p>

<pre><code>$(document).ready(function() {
        // Was the  right-mousedown clicked?
            $(".right_li").mousedown(function(event) {
        // if (event.which == 3) {
        // $("#spanMouseButton").text('Right Button Clicked');
        //              }
            }); 
 //
 $(".right_li").contextMenu({ menu: 'my_favorites_Delete_Menu' }, function(action, el, pos) { contextMenuWork(action, el, pos); });
//
        function contextMenuWork(action, el, pos) {
                switch (action) {
                    case "delete":
                        {
            var msg = "Delete your favorite by the name you saved as: " + $(el).find(".right_li_href").text() + "?";                                
            var msg2 = $(el).find(".right_li_href").text();
        var li = $(this);
            li.remove();                            
        confirm(msg);
    // save the href in a hiddenfield for pass back to the codebehind (Ajax)
        $('.div_hf_favorite_name_css input[type=hidden]').val(msg2);                                
            break;
                        }                           
                    case "how_to":
                        {
                    $("#ShowInstructions").modal({
                                close: true,
                                onOpen: modalOpenShowInstructions,
                                onClose: modalOnClose,
                                persist: true,
                    containerCss: ({ width: "600px", height: "100%", marginLeft: "-300px", marginTop: "-100px", overflow: "auto" })
                            });
                            break;
                        }                       
                }
            }
 //
            function contextHowto() {               
                $("#ShowInstructions").modal({
                    close: true,
                    onOpen: modalOpenShowInstructions,
                    onClose: modalOnClose,
                    persist: true,
                    containerCss: ({ width: "600px", height: "100%", marginLeft: "-300px", marginTop: "-100px", overflow: "auto" })
                });
            }
//
            function confirm(message) {
                $("#confirm").modal({
                    close: true,
                    overlayId: 'confirmModalOverlay',
                    containerId: 'confirmModalContainer',
                    onClose: modalOnClose,
                    onShow: function modalShow(dialog) {
                        dialog.overlay.fadeIn('slow', function() {
                            dialog.container.fadeIn('fast', function() {
                                dialog.data.hide().slideDown('slow');
                            });
                        });
                        dialog.data.find(".confirmmessage").append(message);
                        // Yes button clicked
                        dialog.data.find("#ButtonYes").click(function(ev) {
                            ev.preventDefault();
                            $.modal.close();        
 //         remove the li on the confirmation of the delete
                            var li = $(this);
                        li.remove();
 //             don't postback for now
                            false;

 // Here's where to go in the code-behind on the postback                                        //$("[id*=ButtonHiddenDeleteFavorite]").click();
//
                        });
                    }
                });
            }
 //
            function modalOpenAddCustomer(dialog) {
                dialog.overlay.fadeIn('fast', function() {
                    dialog.container.fadeIn('fast', function() {
                        dialog.data.hide().slideDown('slow');
                    });
                });
                dialog.data.find(".modalheader span").html("Add New Customer");                     
            }
 //                 
            function modalOpenShowInstructions(dialog) {
                dialog.overlay.fadeIn('fast', function() {
                    dialog.container.fadeIn('fast', function() {
                        dialog.data.hide().slideDown('slow');
                    });
                });
                dialog.data.find(".modalheader span").html("How to use the Favorites");
                // if the user clicks "yes"
                dialog.data.find("#Show_Instructions").click(function(ev) {
                    ev.preventDefault();
                    //Perfom validation
                    if (Page_ClientValidate("addCustomer")) {
                        $.modal.close();
                        $("#ButtonHiddenAddCustomer").click();
                    };
                });
            }
  //                
                    function modalOnClose(dialog) {
                dialog.data.fadeOut('slow', function() {
                    dialog.container.slideUp('slow', function() {
                        dialog.overlay.fadeOut('slow', function() {
                $.modal.close(); // must call this to have SimpleModal                   

        // re-insert the data correctly and
        // clean up the dialog elements                         
 //
                        });
                    });
                });
            };
        });
       }
</code></pre>
