title: How to remove and undo remove a gridview row using javascript?
body: <p>I have a gridview, on clicking a delete button, i need to remove the row for a while and on clicking the undo link, i need to re-display the row. </p>
  
  <p>My gridview code is shown below:</p>
  
  <pre><code>  &lt;asp:GridView ID="NotificationHistory" runat="server" AllowPaging="True"
          AutoGenerateColumns="False" DataKeyNames="Id" 
          ShowHeader="False" PagerSettings-Mode="NumericFirstLast"
          FooterStyle-BorderStyle="None" EnableViewState="False" GridLines="None" &gt;
          &lt;PagerSettings Mode="NumericFirstLast"&gt;&lt;/PagerSettings&gt;
          &lt;Columns&gt;
              &lt;asp:TemplateField&gt;
                  &lt;ItemTemplate&gt;
                      &lt;img alt="Delete" title="Delete" src="SiteImages/X.gif" 
                          onclick="changeImage(this)" /&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
              &lt;asp:TemplateField HeaderText="Name"&gt;
                  &lt;EditItemTemplate&gt;
                      &lt;asp:TextBox ID="TextBox1" runat="server" Text='&lt;%# Bind("ItemName") %&gt;'&gt;&lt;/asp:TextBox&gt;
                  &lt;/EditItemTemplate&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:Label ID="Label1" runat="server" Text='&lt;%# Bind("ItemName") %&gt;'&gt;&lt;/asp:Label&gt;
                  &lt;/ItemTemplate&gt;
  
              &lt;/asp:TemplateField&gt;
              &lt;asp:TemplateField HeaderText="Status"&gt;
                  &lt;EditItemTemplate&gt;
                      &lt;asp:TextBox ID="TextBox2" runat="server" Text='&lt;%# Bind("Status") %&gt;'&gt;&lt;/asp:TextBox&gt;
                  &lt;/EditItemTemplate&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:Label ID="Label2" runat="server" Text='&lt;%# Bind("Status") %&gt;'&gt;&lt;/asp:Label&gt;
                  &lt;/ItemTemplate&gt;
                  &lt;ItemStyle BorderColor="#F1E8E8" BorderStyle="Solid" BorderWidth="1px" CssClass="gridItemAlignment" /&gt;
              &lt;/asp:TemplateField&gt;
              &lt;asp:BoundField DataField="Id" HeaderText="ID" Visible="false" /&gt;
              &lt;asp:TemplateField&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:ImageButton ID="ImgDelete" runat="server" Width="16px" Height="16px" CommandName="Remove"
                          ImageUrl="SiteImages/X.gif" ClientIDMode="Static" Enabled="false" /&gt;
                      &lt;asp:HiddenField ID="hFType" runat="server" /&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
          &lt;/Columns&gt;
          &lt;HeaderStyle Height="10px" BorderColor="Silver" BorderStyle="None" BorderWidth="0" /&gt;
          &lt;FooterStyle BorderStyle="None"&gt;&lt;/FooterStyle&gt;
          &lt;PagerStyle HorizontalAlign="Right" BorderStyle="None" ForeColor="#999999"&gt;&lt;/PagerStyle&gt;
          &lt;EmptyDataTemplate&gt;
              &lt;asp:Label ID="lblHistory" runat="server"&gt;No History.&lt;/asp:Label&gt;
          &lt;/EmptyDataTemplate&gt;
      &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>My html :</p>
  
  <pre><code>&lt;table id="ctl00_Content_NotificationHistory" class="home-history-grid" cellspacing="0" border="0" style="border-color: rgb(241, 232, 232); border-style: none; width: 100%; border-collapse: collapse;"&gt;
  &lt;tbody&gt;
  &lt;tr class="home-history-grid-row"&gt;
  &lt;td&gt;
  &lt;img height="16px" width="16px" onclick="changeImage(this)" src="SiteImages/X.gif" title="Delete" alt="Delete"&gt;
  &lt;/td&gt;
  &lt;td class="gridItemStyle" style="border: 1px solid rgb(241, 232, 232); width: 75%;"&gt;
  &lt;a href="ReportCreation.aspx?rid=207"&gt;Status Report for Kalista as on 05/03/2012&lt;/a&gt;
  &lt;/td&gt;
  &lt;td class="gridItemAlignment" style="border: 1px solid rgb(241, 232, 232);"&gt;Saved&lt;/td&gt;
  &lt;td&gt;
  &lt;img id="ImgDelete" height="16px" width="16px" onclick="deleteRow(this)" src="SiteImages/X.gif" alt=""&gt;
  &lt;input id="ctl00_Content_NotificationHistory_ctl02_hFType" type="hidden" value="Cirrus.CirrusObjects.Report" name="ctl00$Content$NotificationHistory$ctl02$hFType"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="home-history-grid-row"&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;td class="gridItemStyle" style="border: 1px solid rgb(241, 232, 232); width: 75%;"&gt;
  &lt;/td&gt;
  &lt;td class="gridItemAlignment" style="border: 1px solid rgb(241, 232, 232);"&gt;Saved&lt;/td&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My javascript to remove the row (This is removing the selected row, now i would like to know how i can re-display it on the same place):</p>
  
  <pre><code> function deleteRow(imageElement) {
              var img = $(imageElement);
              imageElement.setAttribute("id", "selectedRow");
              alert($("selectedRow").siblings(":image"));
              var row = $(imageElement).closest('tr');
              $(row).remove();
          }
  </code></pre>