使用jquery或javascript从列表视图中删除项目

Question

我有下面的列表视图，我想在用户按下添加到购物车按钮时删除一个项目。我不是百分之百确定listview是如何工作的，因为ID必须是唯一的，因为你可以用一个gameRow ID来告诉表格行不是唯一的。我想实现的是当用户按下添加到购物车按钮时，删除该游戏内的所有tr。

我正在使用一个asp列表视图并通过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

我最终改变了html，使这更容易一些。这里是我的ListView的ItemTemplate现在的样子。有了CSS的一些帮助（下面），gameImageDiv和gameInfoDiv将并排。

<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> 

现在让CSS将游戏信息堆叠在游戏图像旁边。

#gameContainerDiv { 
 
     display: table; 
 
    } 
 

 
    #gameImageDiv, #gameInfoDiv { 
 
     display: table-cell; 
 
    } 
 

 
    #gameInfoUL{ 
 
     list-style-type:none; 
 
    }

现在的jQuery来删除游戏图像和有关游戏的信息。 onclick事件将执行传入点击按钮的removeGameRow函数。从那个按钮我得到按钮id，我找到了一个类名为gameContainerDiv的最接近的div并将其删除。 gameContainerDiv - 是游戏图像和游戏信息的容器。

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

 
});