title: Remove entry from the view after delete from the DB
body: <p>Im using the following code to show table data in the index page,currently I've 
  created delete inline which the user click on the delete button he get popup to confirm and click on delete is invoke action of delete which delete the entry from DB.the problme is that after i've deleted it from the DB I still see it in the UI after the modal was closed,just after I refresh the page the entry is removed ,how should I delete the entry from the UI after the ajax call get success?</p>
  
  <pre><code>  @model IEnumerable&lt;TestropDownCreate.Models.TestModel&gt;
  
      @{
          ViewBag.Title = "Index";
      }
  
      &lt;h2&gt;Index&lt;/h2&gt;
      &lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;!-- Modal --&gt;
      &lt;div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                      &lt;h4 class="modal-title" id="deleteModalLabel"&gt;Delete Item&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div id="deleteModalBody" class="modal-body"&gt;&lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
  </code></pre>
  
  <p>Delete
                      
                  
              
          </p>
  
  <pre><code>    &lt;p&gt;
          @Html.ActionLink("Create New", "Create")
      &lt;/p&gt;
      &lt;table class="table"&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.Name)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.SelectedGender)
              &lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
  
          @foreach (var item in Model)
          {
              &lt;tr&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Name)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.SelectedGender)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                      @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                      &lt;a href="#" class="deleteLink" id="@item.ID"&gt;delete&lt;/a&gt;
  
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
  
      &lt;/table&gt;
  
  
      &lt;script&gt;
          $(function () {
              $("#deleteModal").modal("hide");  // initially hides the modal pop-up until needed
  
              $(".deleteLink").on("click", function () {
  
                  $.get('@Url.Action("GetDeletePartial")', { id: $(this).prop("id") }, function (data) {
                      $("#deleteModalBody").html(data);
  
                      $("#deleteModal").modal("show");  // shows the modal pop-up now that we have our partial view
                  });
  
              });
          });
   $("#deleteBtn").on("click", function () {
                  $.ajax({
                      type:'POST',
                      url: "/User/DeleteConfirmed",
                      dataType: "json",
                      data:  {id: Id} ,
                      success: function (result) {
                          var id = result;
  
                      },
  
  
                  });
  
              });
  
          });
      &lt;/script&gt;
  </code></pre>