jquery - $(this).parent("tr").remove(); doe not delete the tablerow from the view -

this question follows on previous question; mvc: button not firing click event in tablecell

because creating grid dynamically, have use jquery delegate in order attach event button in grid.

so have section in view;

   <section id="rightside" class="shrinkwrap" style="float: right;margin-top:10px;width:500px;">         <fieldset>             <legend>select other materials</legend>             <form method="get" action="@url.action("createothermaterials", "dataservice")"                   data-scd-ajax="true" data-scd-target="#othermateriallist">                 <p>select material: <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")"/>                     @html.dialogformbutton("add new material", url.action("addmaterial", "popup"), "add new material", null, url.action("create"))                 </p>             </form>                @html.partial("_othermaterials", model.suppliermateriallist.where(x => x.primarymaterialflag == false).tolist())          </fieldset>     </section> 

the partial view _othermaterials looks like

@model ilist<suppliermaterial>  <div id="othermateriallist" >     <p>these materials have been added supplier</p>     <table id="tableothersupplierlist">         @html.displayformodel()     </table> </div> 

and display template;

@model suppliermaterial <tr>     <td>@model.material.materialname </td>     <td>         <form class="shrinkwrap" method="get" action="@url.action("removeothermaterial", "dataservice", new { id = model.materialid })">             <input type="button" id="btnremove" value="remove" class="removeitem"/>         </form>     </td> </tr> 

i use query remove row in grid when remove button clicked;

 $('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; }); 

i tried replacing body element closer such #tableothersupplierlist did not work. use on() instead of delegate far above code seems work. main issue have line $(this).parent("tr").remove(); not modify view , remove tablerow. how fix this?

i think want:

var removeitemel = $(this); $.ajax(options).done(function (data) {     removeitemel.closest("tr").remove(); }); 

parent travels 1 level. , since .removeitem within form, need closest.

and foxx saying, using this inside done callback, you're not targetting dom element. have assign local variable (var removeitemel = $(this);).