CODEWITHSUNDEEP
javascriptjqueryhtml
fraser jordan
fraser jordan

Reputation: 114

Closest.remove not working

I have the following code in my view, which creates a benefit row for each item in my models list.

     for (var i = 0; i < Model.Benefits.Count(); i++)
                            {
                                <div class="benefits-row">
                                    @Html.HiddenFor(a => Model.Benefits[i].AllowanceID)
                                    @Html.HiddenFor(a => Model.Benefits[i].AllowanceTypeID)@* This somehow magically turns into id="Benefits_0__AllowanceTypeID" name="Benefits[0].AllowanceTypeID", which is why a foreach won't work. *@

                                    @if (Model.IsUnlocked)
                                    {
                                        if (Model.CanEdit)
                                        {
                                            @*                                            @Html.DropDownListFor(a => Model.Benefits[i].AllowanceTypeID, new SelectList(Model.AllowanceTypesBenefits, "Value", "Text", Model.Benefits[i].AllowanceTypeID), new { @style = "width:220px;" }, Model.CanView)*@

                                            <label style="width: 90px; margin-right: 20px; text-align: right;">@Model.Benefits[i].AllowanceTypeName</label>

                                                @Html.TextBoxFor(a => Model.Benefits[i].Amount, Model.CanView, new { maxlength = "110", size = "10", Value = String.Format("{0:0.00}", Model.Benefits[i].Amount) })
                                                @Html.ValidationMessageFor(m => Model.Benefits[i].Amount)

                                                @Html.TextBoxFor(a => Model.Benefits[i].ExpiryDate, new { @class = "datepicker", @style = "width: 80px;", Value = String.Format("{0:d/MM/yyyy}", Model.Benefits[i].ExpiryDate), @readonly = "readonly" })
                                                @Html.ValidationMessageFor(m => Model.Benefits[i].ExpiryDate)
                                            <a class="removeBenefit" href="javascript:" onclick="$pc_nav.people.DeleteBenefit()">
 FRASER
                                            </a>
                                        }
                                        else if (Model.CanView)
                                        {
                                            <span class="benefitLabel">@Model.Benefits[i].AllowanceTypeName</span>
                                                @Html.TextBoxFor(a => Model.Benefits[i].Amount, Model.CanView, new { maxlength = "100", size = "8", Value = String.Format("{0:0.00}", Model.Benefits[i].Amount), @readonly = "readonly", disabled = "disabled" })
                                                @Html.TextBoxFor(a => Model.Benefits[i].ExpiryDate, new { @style = "width: 80px;", Value = String.Format("{0:d/MM/yyyy}", Model.Benefits[i].ExpiryDate), @readonly = "readonly", disabled = "disabled" })
                                        }
                                    }
                                    else
                                    {
                                        <span class="benefitLabel" style="width: 110px;">@Model.Benefits[i].AllowanceTypeName</span>
                                            <input type="text" size="8" value="###" disabled="disabled" style="width: 80px;" />
                                            @Html.TextBoxFor(a => Model.Benefits[i].ExpiryDate, new { @class = "datepicker", @style = "width: 80px;", Value = String.Format("{0:d/MM/yyyy}", Model.Benefits[i].ExpiryDate), @readonly = "readonly", disabled = "disabled" })
                                    }
                                </div>
                                }

in the following 'a' tag

                                <a class="removeBenefit" href="javascript:" onclick="$pc_nav.people.DeleteBenefit()">
                                    FRASER
                                </a>

I use an onlick event handler to call the following javascript function

DeleteBenefit: function () {

            $(this).closest(".benefits-row").remove();

        }

But when I click the A tag nothing happens, and I have no idea why?

Upvotes: 1

Views: 36

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

Pass to DeleteBenefit element because now this refers to window

<a class="removeBenefit" href="javascript:" onclick="$pc_nav.people.DeleteBenefit(this)"></a>

DeleteBenefit: function (element) {
   $(element).closest(".benefits-row").remove();
}

and if you use jQuery better avoid inline events and use jQuery for bind events, you can do it like this 

<a class="removeBenefit" href="javascript:"></a>

$('.removeBenefit').on('click', function () {
    $(this).closest(".benefits-row").remove();
})

Upvotes: 3

Related Questions