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

Question

This is a question that follows on from my previous question; MVC: Button not firing click event in a tablecell

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.

So I have this section in my 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 a 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 now been added for this supplier</p>
    <table id="tableOtherSupplierList">
        @Html.DisplayForModel()
    </table>
</div>

And my 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 this query remove a row in the grid when the Remove button is 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 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?

$(this) inside done() most likely doesn't refer to any dom element. — fxck, May 21 '13 at 15:05

sroes · Accepted Answer · 2013-05-21T15:14:28.193

2

I think this is what you want:

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

parent only travels up 1 level. And since .removeItem is within the form, you need closest.

And like foxx was saying, by using this inside the done callback, you're not targetting the dom element. So you have to assign it as a local variable (var removeItemEl = $(this);).

edited May 21 '13 at 15:14

answered May 21 '13 at 15:07

sroes

14,663
1
53
72

That is the correct answer. I will tick you when the time restriction allows me. Would you use delegate or would you use on? Would you use body as the selector? I find that only body seems to work. – arame3333 May 21 '13 at 15:15

score 0 · Answer 2 · edited May 23 '17 at 10:25

$(this) inside your done() function didn't refer to the original dom element anymore..

$('body').delegate('.removeItem', 'click', function () {
    var element = $(this);

    $.ajax(options).done(function (data) {
        element.parent("tr").remove();
    });

});

If it still doesn't work, then tr is not the parent of .removeItems, just do some console.logging to see if the element.parent("tr") is matching the element you want to remove.

You might want to check this as well Difference between jQuery parent(), parents() and closest() functions

score 0 · Answer 3 · answered May 21 '13 at 15:10

Try this instead:

$('body').delegate('.removeItem', 'click', function () {
    var $form = $(this).closest("form");
    var $elem = $(this);
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method")
    };

    $.ajax(options).done(function (data) {
        $elem.closest("tr").remove();
    });

    return false;
});

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

3 Answers3