Need to hide/unhide a dynamically created dropdownlist on button click

Question

I have a button which when clicked, creates a dropdownlist. This part of the code is working. But when the same button is clicked again, I want to remove the newly created dropdown. Removing the dropdown part is not working. Overall goal is to dynamically create a dropdown if user wants and if he wants to remove it after creating it, he should be able to.

<div style="border-style: dotted; font-family: 'Segoe UI'; border-width: 1px; height: 14%; position: relative;
        width: 100%; top: 0px; left: 0px;">
        <table style="width: 52%; position: relative; left: 90px; font-size: small; font-weight: 400;
            top: 10px;">
            <tr>
                <td class="style1">
                    <span class="style5" style='color: red;'>*</span>Date:
                </td>
                <td>
                    <asp:TextBox ID="Date" runat="server" Style="position: relative; font-family: 'Segoe UI'; width: 100%" OnTextChanged="Date_TextChanged" AutoPostBack="True"></asp:TextBox>
                    <asp:CalendarExtender ID="Date_CalendarExtender" runat="server" TargetControlID="Date">
                    </asp:CalendarExtender>
                </td>
                <td colspan="2">
                    &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                        ErrorMessage="Enter Date" ControlToValidate="Date" 
                        ValidationGroup="Submit_Validators"></asp:RequiredFieldValidator>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style1">
                    Day:</td>
                <td>
                    <asp:TextBox ID="Day" runat="server" Style="position: relative; font-family: 'Segoe UI'; width: 100%"></asp:TextBox>
                </td>
                <td colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style1">
                    Weather</td>
                <td>
                    <asp:DropDownList ID="Weather" runat="server"
                    Style="position: relative; width: 100%" Font-Names="Segoe UI" 
                        DataSourceID="WeatherOptions" DataTextField="Weather_Status" 
                        DataValueField="Weather_Status">
                    </asp:DropDownList>                    
                </td>
                <td>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server">
    </asp:PlaceHolder>
                    <asp:Button ID="Add_weather" runat="server" Text="+" OnClick="AddTextBox" 
                         />
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style1">
                    Temperature</td>
                <td>
                    <asp:TextBox ID="Temperature" runat="server" 
                        Style="position: relative; font-family: 'Segoe UI'; width: 100%"></asp:TextBox>
                </td>
                <td colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style1">
                    <span class="style5" style='color: red;'>*</span>Job #:
                </td>
                <td>
                    <asp:TextBox ID="JobNumber" runat="server" Style="position: relative; font-family: 'Segoe UI'; width: 100%"></asp:TextBox>
                </td>
                <td colspan="2">
                    &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
                        ErrorMessage="Enter Job Number" ControlToValidate="JobNumber" 
                        ValidationGroup="Submit_Validators"></asp:RequiredFieldValidator>&nbsp;
                </td>
            </tr>
            <tr>
                <td class="style1">
                    Ticket #:</td>
                <td>
                    <asp:TextBox ID="TicketNumber" runat="server" 
                        Style="position: relative; font-family: 'Segoe UI'; width: 100%" 
                        ReadOnly="True"></asp:TextBox>
                </td>
                <td colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style1">
                    Customer Name:
                </td>
                <td>
                    <asp:TextBox ID="CustomerName" runat="server" 
                    Style="position: relative; font-family: 'Segoe UI'; width: 100%"></asp:TextBox>
                </td>
                <td colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style1">
                    Location/Project Name:
                </td>
                <td>
                    <asp:TextBox ID="Location" runat="server" Style="position: relative; font-family: 'Segoe UI'; width: 100%"></asp:TextBox>
                </td>
                <td colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style1">
                    Project Manager:</td>
                <td>
                    <asp:DropDownList ID="Manager" runat="server" DataSourceID="Product_Manager" 
                        DataTextField="Name" DataValueField="Name"                        
                        Style="position: relative; width: 102%" Font-Names="Segoe UI">
                        <asp:ListItem></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td colspan="2">
                    &nbsp;</td>
            </tr>
            </table>
        <br />
        <table style="width: 52%; position: relative; left: 90px; font-size: small;">
            <tr>
                <td class="style47">
                    Start Time</td>
                <td class="style47">
                    Finish Time</td>
                <td class="style47">
                    Total Hours</td>
            </tr>
            <tr>
                <td class="style42">
                    <asp:DropDownList ID="Start_Time" runat="server" 
                        Style="position: relative; font-family: 'Segoe UI'; width: 100%" 
                        AutoPostBack="True" onselectedindexchanged="Start_Time_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
                <td class="style42">
                    <asp:DropDownList ID="Finish_Time" runat="server" 
                        Style="position: relative; font-family: 'Segoe UI'; width: 100%" 
                        AutoPostBack="True" onselectedindexchanged="Finish_Time_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
                <td class="style42">
                    <asp:TextBox ID="Tkt_Total_Hours" runat="server" 
                        Style="position: relative; font-family: 'Segoe UI'; width: 100%" 
                        AutoPostBack="True" ontextchanged="Tkt_Total_Hours_TextChanged"></asp:TextBox>
                </td>
            </tr>
            </table>                
    </div>

Code behind:

protected void AddTextBox(object sender, EventArgs e)
    {
        foreach (Control item in pnlPageRefresh2.Controls.OfType<DropDownList>())
        {
            if (item.ID == "weather2")
            {
                pnlPageRefresh2.Controls.Remove(item);
                break;
            }
        }
        create_cntrl();

    }


    protected void create_cntrl()
    {
        DropDownList weather2 = new DropDownList();
        weather2.DataSourceID = "WeatherOptions";
        weather2.DataTextField ="Weather_Status" ;
        weather2.DataValueField = "Weather_Status";
        pnlPageRefresh2.ContentTemplateContainer.Controls.Add(weather2);
        PlaceHolder1.Controls.Add(weather2);
    }

Answer 1

Could you please notice that you are just creating the dropdown again, after you remove it in your foreach loop..

Update it as below.. If control found then remove it if doesn't found then create it alternatively as below

   protected void AddTextBox(object sender, EventArgs e)
   {
      bool found = false;
      foreach (Control item in pnlPageRefresh2.Controls.OfType<DropDownList>())
      {
          if (item.ID == "weather2")
          {
              found = true;
              pnlPageRefresh2.Controls.Remove(item);
              break;
          }
      }
      //check if not found then create it
      if(!found)
      {
          create_cntrl();
      }
   }