javascript - 動的に追加された要素が HTML テーブルの TD に表示されない

Question

私はこのコードを持っています:

var closeButton = $("<a class='close'/>")
                                    .button({
                                        icons: {
                                            primary: "ui-icon-close"
                                        },
                                        text: false
                                    })
                                    .removeClass("ui-corner-all")
                                    .addClass("ui-corner-right ui-combobox-toggle")
                                    .click(function () {
                                        if (invisibleElement != null)
                                            jQuery(invisibleElement).val("");
                                        //removing the close button with placaholder value
                                        jQuery(visibleElement).val("Select");
                                        jQuery(visibleElement).focus();
                                        jQuery(visibleElement).blur();
                                        var parentNode = $(this).parent();
                                        parentNode.find(this).remove();
                                        isCloseButton = false;
                                    });

そして、私はこれによって条件付きでこのボタンを追加しています:

$(visibleElement).parent().find(".showAll").after(closeButton);

これはデフォルトでは追加されません。これは、いくつかの入力に基づいて追加されます。

これらはtd内に追加されます

<table border="0" width="100%" cellspacing='0' cellpadding='2'>
<tr>
    <td style="vertical-align:middle; text-align:left; width: 45%;">
                                <input type="text" id="theVisibleElement" value=""/>

    </td>
</tr>

しかし、を追加した後、要素closeButtonを見ることができません。showAllinputBox( visibleElement) とのみcloseButtonが表示されます。ただし、ソース コードには、visibleElement (入力 TextBox)、showAll要素、およびcloseButton. 奇妙なことに、tdは十分な大きさですが、それでも 3 つすべてが表示されません。何をすべきか？なにか提案を？

これは jsfiddle です: http://jsfiddle.net/8U6xq/1/ 少し面倒ですが。