title: Delete row from the page without refreshing the page
body: <p>I use this method to delete a row from the table. I'm able to delete the row from the database and shows the 'status' alert. But i've to refresh the page for removing the row from the page. What should i do?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function DeleteRow(btnDel) {
      $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
        alert("Status: " + status);
      });
      $(btnDel).closest("tr").remove();
  }
  &lt;/script&gt;
  
  
  
  ***Html***
  
  
  &lt;tbody&gt;
              &lt;% var ATRowId = 0; foreach (var item in Model.List)
                 {%&gt;
          &lt;tr style="text-align:center"&gt;
              &lt;td&gt;&lt;%=Html.TextAreaFor(m =&gt; m.List[RowId].Type, new { value = @Model.List[ATRowId].Type, @style = "width:260px;" })%&gt;
                  &lt;%=Html.HiddenFor(x=&gt;x.List[RowId].AssistiveId,Model.ATList[RowId].AssistiveId) %&gt;&lt;/td&gt;
              &lt;td&gt;&lt;%=Html.TextAreaFor(m =&gt; m.List[RowId].Schedule, new { value = @Model.List[ATRowId].Schedule, @style = "width:260px;" })%&gt;&lt;/td&gt;
              &lt;td&gt;&lt;%=Html.TextAreaFor(m =&gt; m.List[RowId].Storage, new { value = @Model.List[ATRowId].Storage, @style = "width:260px;" })%&gt;&lt;/td&gt;
              &lt;td style="width:50px"&gt;&lt;input type="button" value="delete" class="btnDel" style="float:right;width:20px" onclick="DeleteRow(&lt;%= item.AssistiveId%&gt;)" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
                 &lt;% ATRowId++;
                 }%&gt;
              &lt;/tbody&gt;
  </code></pre>