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

@foreach(var item in Model)
{
<tr id="[email protected]">
    <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 pletely.

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

@foreach(var item in Model)
{
<tr id="[email protected]">
    <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 pletely.

• javascript
• jquery
• model-view-controller
• tablerow

Share Improve this question Follow edited Nov 14, 2012 at 16:49 ruakh 184k2929 gold badges290290 silver badges323323 bronze badges asked May 20, 2012 at 14:42 Tal lTal l 26511 gold badge44 silver badges1212 bronze badges 2

• You have errors in your js. The anonymous function isn't closed, and the line isn't ended. jsfiddle/7Z4C4 – Jørgen R Commented May 20, 2012 at 14:46
• I remend using data-del-url="" and using .data('del-url'). Custom attributes are invalid like you have now. – pimvdb Commented May 20, 2012 at 14:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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.

Here is you solution:

http://jsfiddle/irpm/enEAt/1/

the javascript is:

$('.delete-file').click(function(e) {
    $(this).closest('tr').remove();
});​

You need to prevent the default action of the <a> element, and use the correct selectors

$('.delete-file').click(function(e) {
    e.preventDefault();
    var self=this,
        delUrl = $(this).attr('del-url');
    $.post(delUrl, function() {
        $(self).closest('tr').fadeOut('slow');
    },'json');
});

This line:

$.post(delUrl, null, removeRow(),'json');

simply equivalent to this:

$.post(delUrl, null, undefined, 'json');

as removeRow() function does not return anything. Change that line to this:

$.post(delUrl, null, removeRow,'json');   //Without '()' after 'removeRow'

And your removeRow function will not work as you expected I guess. That function will hide all the rows, but you need to hide only that one, which 'delete-file' is clicked. So you need to pass reference of that row to removeRow function. Here is one way of doing that:

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

function removeRow($row) {   $row.fadeOut('slow');   }