jquery - jqueryからすべての動的データが削除された後、divをスライドトグルします

Question

ユーザーがキーワードを div に追加するアプリケーションがあります。彼らは、好きなだけキーワードを追加/削除することができます。最初のキーワードを追加すると、div は slideToggle を使用して div を開き、最初のキーワードを表示します。これらのキーワードは配列に追加されます。livequery プラグインを使用して、x グラフィックをクリックしたときにキーワード div を削除します。私が抱えている問題は、最後のキーワードが削除されたときです (配列の長さ 0 に基づいて)。div で再度 slideToggle を使用して div を閉じます。これは私の現在のコードでは機能しません。

    //Here's my jquery
    $(document).ready(function () {
        //number of keywords
        var numkw = 0;
        //keyword array
        var keywords = [];
        //ouput of array
        var output = "";
        //hide the div that holds the keywords
        $("div#KeywordHolder").hide();


        //When the Add keyword button clicked 
        $("#nihSearch_btnSearch").click(function () {
            //value of textbox
            var currentkeyword = $("#nihSearch_txtSearch").val();
            //if numkw is 0 slide open the keyword holder
            if (keywords.length == 0) {
                keywords.push(currentkeyword);
                //slide open keywordHolder
                $("div#KeywordHolder").slideToggle("slow", function () {
                    $("div#KeywordHolder").delay(2000, function () {
                        //add first tab to keys div and fade it in
                        $("div#keys").append("" + currentkeyword + " ");
                        var lastid = $("div#keys .tab:last").attr("id");
                        $("div#keys").fadeIn(1000);
                    });

                });



            }
            //otherwise add the tab and keyword to the array
            else {
                keywords.push(currentkeyword);
                $("div.tab:last").after("" + currentkeyword + " ", function () {
                    $(this).fadeIn(1000);
                });
                var lastid = $("div#keys .tab:last").attr("id");
            }

        });

        //When get resources button clicked show current array values
        $("#nihSearch_btnResults").click(function () {
            output = "";
            //as a test output all array values into a message box
            $.each(keywords, function (i, l) {
                output += l + " ";
            });

            alert(output);
        });


        //Tab x clicked
        $('#keys', 'body')
            .find('a.xclick')
                .livequery('click', function () {
                    //gets the id of the tab clicked on
                    var getid = $(this).parent().attr("id");
                    //gets the number of the tab from the id value
                    var numid = parseInt(getid.replace(/\D/g, ''), 10);
                    $(this).parent("div").remove();
                    keywords.splice((numid - 1), 1);
                    alert("Length: " + keywords.length);
                    if (keywords.length == 0) {
                        alert("In the if statement");                   
                        $("div#KeywordHolder").slideToggle("slow");
                    }
                    return false;
                });


    });

    //code for autocomplete textbox

    $(function () {
        var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
        $(".homeSearchBox").autocomplete({
            source: availableTags
        });
    });

    // code for drop down

    (function ($) {
        $(function () {
            $('#combolist').combobox();

        });
    })(jQuery);

<!-- Here's my html -->

<div class="ui-widget">
                                <asp:TextBox ID="txtSearch" placeholder="Enter Keywords..." columns="25" CssClass="homeSearchBox" runat="server"></asp:TextBox>

                                 <asp:Button ID="btnSearch" CssClass="searchButton" runat="server" 
                                Text="Add Keyword" UseSubmitBehavior="False" />
                            </div>

                            <div id="KeywordHolder">
                                <div id="keys">
                                    <!-- <div class='tab'><span>test tab</span><a href='#' class='xclick' />Close</a></div> -->
                                </div>
                                <br class="clear" />  
                                <div class="rightdiv">
                                    <asp:Button ID="btnResults" CssClass="searchButton" runat="server" 
                                    Text="Find Resources" UseSubmitBehavior="False" />
                                </div>                         
                            </div>