[RESOLVED]How do I remove an item from a listview with Jquery?

I want to remove an item from a ListView with Jquery.  How do I do that?

Could you provide an example of what your ListView might look like? Or an example of what your rendered markup (within your page) might look like?

Once you get a feel for how to use jQuery selectors to target specific elements, it can make their removal quite easy. It would be much easier to have some existing data to work with, but if you don’t, I could throw together a quick example.

Actually, I’ll just throw together one real quick.

Let’s say you have a ListView that looks like the following :

<form id="form1" runat="server">
        <!-- Your List View -->
        <asp:ListView ID="YourListView" runat="server">
            <ItemTemplate>
                <div id="element-<%# Eval("Value") %>">
                    <%# Eval("Value") %>
                </div>
            </ItemTemplate>
        </asp:ListView>
</form>

This is fairly simple as you can tell. It simply generate a <div> element for each value in your collection and gives an id to that element of "element-x", where x is the value. You could use the following code to handle this mapping (for example purposes)
:

public partial class Example : System.Web.UI.Page
{
        protected void Page_Load(object sender, EventArgs e)
        {
            // Bind 25 integers to the List
            YourListView.DataSource = Enumerable.Range(1, 25).Select(w => new Widget(w));
            YourListView.DataBind();
        }
}

// An example class to demonstrate data binding
public class Widget
{
        public int Value { get; set; }

        public Widget(int value)
        {
            Value = value;
        }
}

This will generate something that looks like this :

Each of these elements will have markup that looks like this :

<div id="element-1">
    1
</div>

Using this, you can easily use jQuery to select a particular element based on it’s name by just prefacing the item with ‘element-’. So if you wanted to remove the 5th element, you would use :

<!-- Example jQuery Reference -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
        $(function() {
            // When the page loads, remove the fifth element
            $("#element-5").remove();
        });
</script>

This is a very basic example, however you could easily alter it to target elements by other properties or their actual indices themselves. It ultimately just depends on how your ListView is structured at present.

I always appreciate your help Rion!

Here is an example. I didn’t provide all of the html, but here is where the delete control is.

 <ItemTemplate>                
                    <tr class="even">
                        <td style="width: 50px; white-space: nowrap">
                            <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~//images/icons/Delete.png" CssClass="lvBtnDelete"  CommandName="Delete" ToolTip="Click to Delete this Item" OnClientClick="listViewDelete('ListViewContacts');"/>
                            <asp:ImageButton ID="btnSelect" runat="server" ImageUrl="~//images/icons/Select.png" CssClass="lvBtnSelect" CommandName="Select" ToolTip="Click to Make this choice a Contact for this Loan"/>
                        </td>

when I click on btnDelete, I want to delete the item in the displayed listview. The way it works now, I have to do a postback and run c# codebehind to do it.  I would like to avoid that.

Do you actually want to delete the item from the datasource that is populating your ListView or just remove it from the actual page (without having a postback)?

I was going to let the codebehind delete it as it does when a PostBack is done. But just have it out of the ListView Immediately when it is deleted.

Leave a Reply