title: html controls are cleared off on button click
body: <p>I am new to web development, In the below code, I had few issues:</p>
  
  <p>1) I am unable to find the issue, but all the controls are getting cleared off when i clicked on delete button(X). 
  2) Text box in side the list item is not editable, even readonly=false</p>
  
  <p>Please help me I am clue-less.</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"/&gt;
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
      &lt;script type="text/javascript"&gt;
          var clipNums=[]
          function setTypes(clipTypes) {
  
              $.each(clipTypes, function (i, num) {
                  clipNums.push(num);
  
              })
          }
          $(document).ready(function(){
              $('#target').sortable({
                  update: function (event, ui) {
                  }
              });
  
  
              $(function () {
                  $("#target").sortable();
                  $("#target").disableSelection();
              });
  
              $.each(clipNums, function (i, num) {
                  $('#coachtypes').append("&lt;li class='ui-state-default', id: 'clip_' " + num + "&gt;" + num + "&lt;/li&gt;");
  
              });
  
              $('#coachtypes li').click(function () {
                  $('#target').append("&lt;li class='coach', id: 'clip_'" + 1 + "&gt;" + text + "&lt;input id='Text1' type='text' /&gt;&lt;button class='delete' style='float: right'&gt;X&lt;/button&gt;&lt;/li&gt;");
              });
  
              $('#target .delete').click(function () {
                  $('#target').closest(".coach").remove();
              });
          });
          function getList()
          {            
              var text = $('#target').text();
              alert('text is ' + text);
          }      
    &lt;/script&gt;
      &lt;style type="text/css"&gt;
  
  
  
  #coachtypes {  list-style-type: none;
                 list-style: none; 
                 border: 1px solid #000000; 
                 margin: 0 ; padding: 0; width: 1081px; height: 42px;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;}
  #coachtypes li { cursor:pointer;
                  border:1px solid #dddddd;
                  background:#eeeeee;
                  margin:5px;
                  padding:5px;
                  float: left; width: 100px; height: 20px; font-size: small; text-align: center; }
  
  #target {list-style-type: none;
                 list-style: none; 
                 border: 1px solid #000000; 
                 margin: 0; padding: 0; width: 1081px; height: 190px;
  -moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;
          }
  .coach{cursor:pointer;
      border:1px solid #dddddd;
      background:#eeeeee;
      margin:5px;
      padding:5px;
      float:left;
  }
  
  .delete {background:#eeeeee; font-style: normal; font-weight: bold; color: #FF0000; font-size: x-small; position: fixed; z-index: auto;position: relative;  border:hidden}
  .edit {background:#eeeeee; font-style: normal; font-weight: bold; color: #FF0000; font-size: x-small; position: fixed; z-index: auto;position: relative;  border:hidden}
          #Text1 {
              width: 23px;
              readonly:'false';
  
          }
  
  
  
      &lt;/style&gt;
  
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &amp;nbsp;&lt;br /&gt;
  
          &lt;br /&gt;
  &lt;ul id="coachtypes"&gt;
  
  &lt;/ul&gt;
  
  &lt;ul id="target"&gt;
  
  
  &lt;/ul&gt;
  &lt;asp:Button ID="Button1" runat="server" Text="Button" onclientclick="getList()"/&gt;
  
      &lt;/form&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://stackoverflow.com/questions/20407490/how-to-implement-drag-and-drop-list-composition-ui">How to implement drag and drop List composition UI</a>
  /////////////////////aspx.cs file/////////////////////</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  
  public partial class Compose : System.Web.UI.Page
  {
  
      protected void Page_Load(object sender, EventArgs e)
      {
          if (!Page.IsPostBack)
          {
              Page.ClientScript.RegisterStartupScript(this.GetType(), "onload", "setTypes(" + "['A', 'B', 'C', 'D', 'E' ]" + ")", true);            
          }
          else
          {
              return;
          }
      }
  
  }
  </code></pre>