title: $(this).parent("tr").remove(); doe not delete the tablerow from the view
body: <p>This is a question that follows on from my previous question; <a href="https://stackoverflow.com/questions/16670608/mvc-button-not-firing-click-event-in-a-tablecell?noredirect=1#comment23985513_16670608">MVC: Button not firing click event in a tablecell</a></p>
  
  <p>Because I am creating a grid dynamically, I have to use a jquery delegate in order to attach an event to a button in the grid.</p>
  
  <p>So I have this section in my view;</p>
  
  <pre><code>   &lt;section id="rightSide" class="shrinkwrap" style="float: right;margin-top:10px;width:500px;"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Select Other Materials&lt;/legend&gt;
              &lt;form method="get" action="@Url.Action("CreateOtherMaterials", "DataService")"
                    data-scd-ajax="true" data-scd-target="#otherMaterialList"&gt;
                  &lt;p&gt;Select a Material: &lt;input type="search" name="searchOtherMaterial" id="searchOtherMaterial" data-scd-autocomplete="@Url.Action("AutocompleteOtherMaterial", "DataService")" style = "width: 300px;" class="submitOtherMaterialSelectionNew" data-scd-add-other-material="@Url.Action("AddOtherMaterialNew", "DataService")"/&gt;
                      @Html.DialogFormButton("Add New Material", Url.Action("AddMaterial", "Popup"), "Add New Material", null, Url.Action("Create"))
                  &lt;/p&gt;
              &lt;/form&gt;  
  
              @Html.Partial("_OtherMaterials", Model.SupplierMaterialList.Where(x =&gt; x.PrimaryMaterialFlag == false).ToList())
  
          &lt;/fieldset&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>The Partial View _OtherMaterials looks like</p>
  
  <pre><code>@model IList&lt;SupplierMaterial&gt;
  
  &lt;div id="otherMaterialList" &gt;
      &lt;p&gt;These materials have now been added for this supplier&lt;/p&gt;
      &lt;table id="tableOtherSupplierList"&gt;
          @Html.DisplayForModel()
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my display template;</p>
  
  <pre><code>@model SupplierMaterial
  &lt;tr&gt;
      &lt;td&gt;@Model.Material.MaterialName &lt;/td&gt;
      &lt;td&gt;
          &lt;form class="shrinkwrap" method="get" action="@Url.Action("RemoveOtherMaterial", "DataService", new { id = Model.MaterialId })"&gt;
              &lt;input type="button" id="btnRemove" value="Remove" class="removeItem"/&gt;
          &lt;/form&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I use this query remove a row in the grid when the Remove button is clicked;</p>
  
  <pre><code> $('body').delegate('.removeItem', 'click', function () {
      var $form = $(this).closest("form");
      var options = {
          url: $form.attr("action"),
          type: $form.attr("method")
      };
  
      $.ajax(options).done(function (data) {
          $(this).parent("tr").remove();
      });
  
      return false;
  });
  </code></pre>
  
  <p>I tried replacing the body element with something closer such as #tableOtherSupplierList but that did not work. I would like to use on() instead of delegate but so far only the above code seems to work.
  The main issue I have however is that the line $(this).parent("tr").remove(); does not modify my view and remove the tablerow.
  How do I fix this?</p>