remove item from listview using jquery or javascript

Question

I have the below listview and I want to remove an item when the user presses the add to cart button. I am not 100 percent sure how the listview works because ID's have to be unique and as you can tell the table row with an ID of gameRow will not be unique. What I am wanting to achieve is to remove all of the tr's inside of that gameRow when the user presses the add to cart button.

I am using a asp listview and populating this through the selectmethod.

<asp:ListView ID="lvProductListing"
              ItemType="CommonBusinessObjectsGS.Game"
              SelectMethod="GetGames"
              DataKeyNames="GameId"
              runat="server" EnableViewState="false"   >
    <LayoutTemplate>
        <table id="productListingTable" class="productLisingTable">
            <tr id="itemPlaceholder" runat="server"></tr>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr id="gameRow">
        <tr>
            <td rowspan="6">
                <img class="gameImageIdClass" id="gameImageId" src="<%#:Item.GameImageString%>" alt="" />
            </td>
        </tr>

        <tr>
            <td><%#:Item.GameName%></td>
        </tr>
        <tr>
            <td><%#:Item.PlatformName%></td>
        </tr>
        <tr>
            <td><%#:Item.ConditionShortDescription%></td>
        </tr>
        <tr>
            <td><%#:Item.RetailCost.ToString("c")%></td>
        </tr>
        <tr>
            <td>
                <button id="btnAddToCart" name="btnAddToCart" onclick="removeGameRow()" value="<%#:Item.GameId %>">Add to Cart</button>
            </td>
        </tr>
        </tr>
    </ItemTemplate>
</asp:ListView>

Answer 1

I ended up changing the html to make this a bit easier. Here is what my ItemTemplate for my listview now looks like. With some help with CSS (below) the gameImageDiv and gameInfoDiv will be side by side.

    <ItemTemplate>
        <div id="gameContainerDiv">
            <div id="gameImageDiv">
                <img class="gameImageIdClass" id="gameImageId" src="<%#:Item.GameImageString%>" alt="" />
            </div>
            <div id="gameInfoDiv">
                <ul id="gameInfoUL">
                    <li><%#:Item.GameName%></li>
                    <li><%#:Item.PlatformName%></li>
                    <li><%#:Item.ConditionShortDescription%></li>
                    <li><%#:Item.RetailCost.ToString("c")%></li>
                    <li><button type="button" id="btnAddToCart" name="btnAddToCart" onclick="removeGameRow(this)" value="<%#:Item.GameId %>">Add to Cart</button></li>
                </ul>
            </div>
        </div>
    </ItemTemplate>

Now for the CSS to stack the game information beside the image of the game.

  #gameContainerDiv { display: table; } #gameImageDiv, #gameInfoDiv { display: table-cell; } #gameInfoUL{ list-style-type:none; } 

Now for the jQuery to remove the game image and the info about that game. The onclick event will execute the removeGameRow function passing in the button that was clicked. From that button I am getting the button id and I am finding the closest div with a class name of gameContainerDiv and removing it. gameContainerDiv - is the container for the game image and the info about the game.

 $(document).ready(function () { function removeGameRow(button) { $(button).closest("#gameContainerDiv").remove(); }; });