Reputation: 55132
<ul id="images">
@foreach (var image in Model.Images)
{
<li id="@image.Id" style="list-style-type: none;">
<img src="@image.Path?width=200"/><br/>
<span id="remove"><i class="icon-minus"></i> <a href="#">Remove</a></span>
</li>
}
</ul>
I have this code , that shows pictures, What i want is allow user to remove some, if user want.
I m not sure how to attack to it.
First of all, how can i find out which li item was clicked and how I can remove it from list.
Then I need to invoke a Ajax post to a handler/controller to actually remove it.
Any help?
Upvotes: 0
Views: 60
Reputation: 74410
$(function(){
$('#images li').click(function(){
var liId = this.id;
$(this).remove();
//call ajax here
});
});
If li are added dynamically, you have to use delegation:
$(function(){
$('#images').on('click','li',function(){
$(this).remove();
//call ajax here
});
});
Upvotes: 1