Question

I have a partial view which is not strongly typed. it is dynamic:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<%@ Import Namespace="Student.Models" %>

<div>
<table id="TA">
        <tr>
            <th>Teaching Assistant</th>
            <th>Course ID</th>
            <th>Day</th>
            <th>Delete Row</th>
        </tr>
</table>
</div>

<div>
<table id="StudentAction">
    <tr>
       <td><select name="TeachingAssistant"></select> </td>
       <td><select name="CourseID"></select></td>
       <td><select name="Day"></select></td>
       <td><input name="delete" type="image" src="/delete.png"  onclick="javascript:delete('this')"/></td>
   </tr>

</table>
</div>

Now I add a new row using JQuery every time a new value is selected from “TeachingAssistant” select list.

Also, there is a delete image which on click should delete that particular row. How can I identify a particular row based on the delete image clicked? For e.g if the delete image for row third is clicked then how can I identify third row and send that to JQuery? For e.g. I want to identify the row on which the delete image was clicked and send it to delete function in JQuery below, using “this” does not work, is there any other way to doing this? again this is not a strongly typed view, its dynamic.

function delete(val) {

    $(this).parent().remove();

}

Any help would be appreciated.

Answer 1

Add some class to trigger the event.

<td><input name="delete" type="image" src="/delete.png" class="delete"/></td>

Then use closest to get its row.

$('#StudentAction').on('click', '.delete', function() {
    $(this).closest('tr').remove();
});

demo

or for old versions:

$('#StudentAction .delete').live('click', function() {
    $(this).closest('tr').remove();
});