动态添加的元素不在HTML表的TD中显示

Question

I have this code :

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;
                                    });

And I am adding this button conditionally by this:

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

This is not added by default. This is added based on some input.

These things are added within a 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>

But After adding the closeButton , I am not able to see the showAll element. Only the inputBox( visibleElement ) and the closeButton is visible. Although, in the source code all three are there ie visibleElement(the input TextBox), showAll element and closeButton . Strangely the td is enough big but still all three are not shown up. What to do? Any suggestion?

This is the jsfiddle: http://jsfiddle.net/8U6xq/1/ Though it's a bit messy.

Answer 1

This is a CSS problem. Your "close" element is right over your showAll element. See the corrected fiddle here :

http://jsfiddle.net/8U6xq/2/

I have just changed this in the css :

.close {
    left: 270px;
}