Div cannot be added to another div after remove

Question

I am new in jquery and web programming and making a dynamic html controls.

If user choose a value from combobox, I create a html control which has choosed by user. After

that I remove previous html control.

this is my main div thatI want to copy to another div

<div id="MainContents" style="display: none" >
        <form action="../../newCV/AsyncUpload" id="photoform" enctype="multipart/form-data" method="post">
              <p> <input type="file" id="photo" name="photo" /></p>

            <p><input type="submit" value="Save my profile" /></p>
        </form>
    </div>      

and this is part of my jqeurty function

case "Date":
                $('#c3').remove();
                $("<input name=\"c3\" id=\"c3\" type=\"date\"/>").appendTo("#changeablecontrol");

                break;

            case "Picture":

                $('#c3').remove();

                var html = "<div id=\"c3\" name=\"c3\"></div>";
                $(html).appendTo("#changeablecontrol");

                $('#MainContents').css('display', "inline").appendTo('#c3');

first time, If I choose picture, maintcontents div append to div c3. It okay. But If I choose Date (that remove c3) and again choose Picture, that time It doesnt append. Because When I choose Date, it also removes MainContents div in my form. I dont know why it removes MainContents div. Because its in different part. Then when I choose picture second time in combobox, Its not in my form.

I tried to create maincontents with html code in jquery but that time, some functions dont work.

this is my changeablecontrols div

  <div class="creatediv2" id="changeablecontrol">
    @Html.TextBox("c3","" ,new { onkeydown = "if (event.keyCode == 13) document.getElementById('create').click()" })
</div >

I used append instead of appendTo

html += "<div id=\"MainContents\">"
                html += "<form id=\"photoform\"  action=\"../../NewCV/AsyncUpload\"   enctype=\"multipart/form-data\" method=\"post\">"; //method=\"post\"
                html += "<input type=\"file\" id=\"photo\" name=\"photo\" />";
                html += "<input type=\"submit\" id=\"uploadbtn\" value=\"Upload Photo\" /></form>";
                html += "</div>"
                $('#c3').append(html);

but this jquery function doesnt work

   $(function() {

            $("#photo").makeAsyncUploader({
                upload_url: "../newCV/AsyncUpload",
                flash_url: '../Scripts/swfupload.swf',
                button_image_url: '../../Content/blankButton.png',
                disableDuringUpload: 'INPUT[type="submit"]'
            });

        });

I hope that I explained my issue..

Answer 1

As bumerang said, I created divs for each controls and changed their display values from hide to inherit.

  <div class="creatediv2" id="changeablecontrol">

      <div id="filecontent" style="display: none" >
        <form action="/NewCV/AsyncUpload" id="photoform" enctype="multipart/form-data" method="post">
              <p> <input type="file" id="photo" name="photo" /></p>

            <p><input type="submit" value="Save my profile" /></p>
        </form>


  </div>     

<div id="textcontent" style="display: inherit">
    <input id="c3-1" name="c3" onkeydown="if (event.keyCode == 13) document.getElementById('create').click()" type="text" value="" />

</div>

<div id="longtextcontent" style="display: none">
      <textarea name="c3" id="c3-2" rows="5" cols="20"></textarea>
</div>

<div id="datecontent" style="display: none">
       <input name="c3" id="c3-3" type="date"/>
</div>


    </div >

my jsquery functions

    <script type="text/javascript">
        $(function() {

            $("#photo").makeAsyncUploader({
                upload_url: "/newCV/AsyncUpload",
                flash_url: '/Scripts/swfupload.swf',
                button_image_url: '/Content/blankButton.png',
                disableDuringUpload: 'INPUT[type="submit"]'
            });

        });
    </script> 

and this one is changing displays' value

  var val = cmb.options[cmb.selectedIndex].text;

        switch (val) {
            case "Text":
                $('#textcontent').css('display', 'inherit');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'none');

                break;
               case "Long Text":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'inherit');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'none');

                break;

            case "Date":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'inherit');
                $('#filecontent').css('display', 'none');

                break;

            case "Picture":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'inherit');
                break;

        default:

            break;
        }

thank you :)

Answer 2

I dont know why it removes MainContents div. Because its in different part.

No it's not. You have append it to #c3, so when You delete (remove) the #c3 You also remove all his childrens. Maybe You should use append(), instead of appendTo() function?