$(this).parent("tr").remove(); doe not delete the tablerow from the view
<p>This is a question that follows on from my previous question; <a href="http://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>
