Question

In MVC, I constructed a table in a view, by iterating over a ‘List’ of a viewmodel.

@foreach(var item in Model)
{
<tr id="[e-mail]">
    <td>
        @item.type
    </td>
    <td >
        @Html.ActionLink((string)item.name, "Download", "FileUpload", new { rout = item.rout, fileName = item.name }, null)
    </td>
    <td>
        @item.size
    </td>
    <td>
        <a href="#" id="delete-file" del-url="@item.delete_url">Delete</a>
    </td>
</tr>

}

when I load the page, I get a list of files, with a ‘delete’ link for each.

I implemented with jQuery a basic ‘remove row’ method:

$('#delete-file').click(function() {
    var delUrl = $(this).attr('del-url');
    $.post(delUrl, null, removeRow(),'json')
});

function removeRow() {
   $($('#delete-file').closest('tr')).fadeOut('slow');
}

When I click ‘delete’ on one of the file rows, it performs well, but then, if I click on another (delete), nothing happens. No file is deleted on server, and the row is not removed, as if it’s being ignored completely.

Answer 1

You need to use class="delete-file" instead of id="delete-file" – and of course the corresponding $(".delete-file") selector as well.

IDs are meant to be unique per document, and your code binds the handler to the first id="delete-file" element.