CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
DarthVader
DarthVader

Reputation: 55132

Removing elements from <ul> on <li> click

    <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

Answers (1)

A. Wolff
A. Wolff

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

Related Questions