CODEWITHSUNDEEP
javascriptjqueryhtml
Dave
Dave

Reputation: 1492

How to hide, when page starts, html element generated automatically with jQuery

When page starts, jQuery produce a form that I want it to be hidden. Because I want to show it when I click on a button.

With these instructions I create the form:

$("#cards").append('<li id="card" class="feed-element animated fadeInRight" style="color: grey" data-user="' + key + '">\n\
                        <button id="previewCard" type="button" value = "' + key + '" class="btn btn-primary btn-sm btn-block btn-xs">' + preview + '</li>\n\
                        <form id="cardFormDetail" class="animated fadeInRight">\n\
                            <div class="form-group">\n\
                                <input id="customerCardDate" class="form-control" type="text">\n\
                            </div>\n\
                            <div class="form-group">\n\
                                <input id="customerCardScope" class="form-control" type="text">\n\
                            </div>\n\
                            <div class="form-group">\n\
                                <textarea id="customerCardText" class="form-control" rows="5"></textarea>\n\
                            </div>\n\
                        </form>\n\
                        <button id="modifiedCard" type="button" value = "' + key + '" class="btn btn-primary btn-xs pull-left">Modified</button>\n\
                        <button id="deleteRequestCard" type="button" value = "' + key + '" class="btn btn-primary btn-xs pull-right">Delete</button>\n\
                        <br><hr style="border-color: #c80b00;">');

When page starts cardFormDetail form is visible. How can I make it not visible?

I tried with $("#cardFormDetail").hide() but it doesn't work. And the reason is because it is a dynamic element, right?

Upvotes: 0

Views: 61

Answers (2)

Majid
Majid

Reputation: 151

put your code which hides the form after the code where it appends the element to the.

Another things is you are appending an element with the same id 'cards' to an existing element which has the same id.

It doesn't matter if your element is dynamically added, you should always be able to hide it using jquery.

Can you post the whole code?

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

Since you want to hide it on load, pls use CSS as opposed to jQuery unless there is a reason to justify why you want to do it so.

#cardFormDetail { display: none; }

Upvotes: 5

Related Questions