This will be helpful to some one who is looking for a similar kind of scenario. What I explain here is simple piece of code, but to achieve that in my application as per my need I struggled to find the appropriate one.

My design is static but I am framing this one dynamically in my application, and also here I am showing one section whereas in my application there are multiple sections where I can have duplicate records. When I am removing data I need to make one section inactive and need to removethe entire div in one section.

This is a continuation for my code snippet here. This is the actual problem I have in my application. For a basic one check my code here,
This is how my design and entire code looks, please find the attached code for further reference,
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="favandprev.aspx.cs" Inherits="AP.ROW.UI.favandprev" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. <link href="css/literal.css" rel="stylesheet" />
  9. <script src="scripts/jquery-2.2.0.js"></script>
  10. </head>
  11. <body>
  12. <form id="form1" runat="server">
  13. <div id="no-list">
  14. No Data
  15. </div>
  16. <div id="literal-list" class="literal-offer">
  17. <table style="height: 20px">
  18. <tbody>
  19. <tr>
  20. <td style="vertical-align: middle">
  21. <h3>Favorite List</h3>
  22. </td>
  23. </tr>
  24. </tbody>
  25. </table>
  26. <div class="literal-offer-product">
  27. <div class="image-wrap">
  28. <img class="checkout-offer-img" src="/Images/jerry.png" />
  29. </div>
  30. <div class="literal-offer-info">
  31. <strong>I am Jerry</strong><br />
  32. <br />
  33. <a id="removeLiteral0" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>
  34. </div>
  35. </div>
  36. <div class="clear"></div>
  37. <div class="literal-offer-product">
  38. <div class="image-wrap">
  39. <img class="checkout-offer-img" src="/Images/superman.jpg" />
  40. </div>
  41. <div class="literal-offer-info">
  42. <strong>I am Super Man</strong><br />
  43. <br />
  44. <a id="removeLiteral1" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>
  45. </div>
  46. </div>
  47. <div class="clear"></div>
  48. <div class="literal-offer-product">
  49. <div class="image-wrap">
  50. <img class="literal-offer-img" src="/Images/skate.png" />
  52. </div>
  53. <div class="literal-offer-info">
  54. <strong>Skate Board</strong><br />
  55. <br />
  56. <a id="removeLiteral2" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>
  57. </div>
  58. </div>
  59. <div class="clear"></div>
  60. <div class="literal-offer-product">
  61. <div class="image-wrap">
  62. <img class="literal-offer-img" src="/Images/bsnl.jpg" />
  64. </div>
  65. <div class="literal-offer-info">
  66. <strong>BSNL</strong><br />
  67. <br />
  68. <a id="removeLiteral3" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>
  69. </div>
  70. </div>
  71. <div class="clear"></div>
  72. <div class="literal-offer-product">
  73. <div class="image-wrap">
  74. <img class="literal-offer-img" src="/Images/pendrive.jpg" />
  76. </div>
  77. <div class="literal-offer-info">
  78. <strong>Pen Drive</strong><br />
  79. <br />
  80. <a id="removeLiteral4" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>
  81. </div>
  82. </div>
  83. </div>
  85. <div id="previously-viewed" class="literal-offer">
  86. <table style="height: 20px">
  87. <tbody>
  88. <tr>
  89. <td style="vertical-align: middle">
  90. <h3>Previously Viewed</h3>
  91. </td>
  92. </tr>
  93. </tbody>
  94. </table>
  95. <div class="literal-offer-product">
  96. <div class="image-wrap">
  97. <img class="checkout-offer-img" src="/Images/jerry.png" />
  98. </div>
  99. <div class="literal-offer-info">
  100. <strong>I am Jerry</strong><br />
  101. <br />
  102. <a id="removeLiteral0" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>
  103. </div>
  104. </div>
  105. <div class="clear"></div>
  106. <div class="literal-offer-product">
  107. <div class="image-wrap">
  108. <img class="checkout-offer-img" src="/Images/superman.jpg" />
  109. </div>
  110. <div class="literal-offer-info">
  111. <strong>I am Super Man</strong>
  112. <br />
  113. <a id="removeLiteral1" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>
  114. </div>
  115. </div>
  116. <div class="clear"></div>
  117. <div class="literal-offer-product">
  118. <div class="image-wrap">
  119. <img class="literal-offer-img" src="/Images/skate.png" />
  120. </div>
  121. <div class="literal-offer-info">
  122. <strong>Skate Board</strong><br>
  123. <br />
  124. <a id="removeLiteral2" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>
  125. </div>
  126. </div>
  127. <div class="clear"></div>
  128. <div class="literal-offer-product">
  129. <div class="image-wrap">
  130. <img class="literal-offer-img" src="/Images/bsnl.jpg" />
  131. <a id="lnkQuickView" class="quick-view btn quick-hide" data-target="#quickviewmodal" data-toggle="modal" href="/Order/QuickViewPopUp.aspx?R=2586JS75&src=QuickView-Checkout-PreviouslyViewed">Quick View</a>
  132. </div>
  133. <div class="literal-offer-info">
  134. <strong>BSNL</strong><br>
  135. <br />
  136. <a id="removeLiteral3" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>
  137. </div>
  138. </div>
  139. <div class="clear"></div>
  140. <div class="literal-offer-product">
  141. <div class="image-wrap">
  142. <img class="literal-offer-img" src="/Images/adobe.jpg" />
  143. </div>
  144. <div class="literal-offer-info">
  145. <strong>Adobe</strong>
  146. <br />
  147. <a id="removeLiteral5" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>
  148. </div>
  149. </div>
  150. <div class="clear"></div>
  151. <div class="literal-offer-product">
  152. <div class="image-wrap">
  153. <img class="literal-offer-img" src="/Images/pendrive.jpg" />
  155. </div>
  156. <div class="literal-offer-info">
  157. <strong>Pen Drive</strong><br />
  158. <br />
  159. <a id="removeLiteral4" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>
  160. </div>
  161. </div>
  162. </div>
  163. <br />
  164. </form>
  165. <script type="text/javascript">
  166. $("#no-list").hide();
  167. function removeMe(controlID, isRemove) {
  168. var item = $('#literal-list').find('.literal-offer-product').find('.literal-offer-info').find("a[id='" + controlID.id + "']");
  169. var prev = $('#previously-viewed').find('.literal-offer-product').find('.literal-offer-info').find("a[id='" + controlID.id + "']");
  170. var isExists = $('#literal-list').find('.literal-offer-product').find('.literal-offer-info').find("a[id='" + controlID.id + "']").length;
  171. var favCount = $('#literal-list').find('.literal-offer-product').length;
  172. var removeDiv = controlID.id;
  173. if (isRemove == "Y") {
  174. item.parent().parent().remove();
  175. prev.removeClass("favorite active");
  176. prev.addClass("favorite");
  177. }
  178. else {
  179. if (isExists) {
  180. item.parent().parent().remove();
  181. $('#' + controlID.id).removeClass("favorite active");
  182. $('#' + controlID.id).addClass("favorite");
  183. }
  184. else {
  185. if (favCount < 5) {
  186. if ($('#' + controlID.id).hasClass('favorite')) {
  187. $('#' + controlID.id).removeClass("favorite");
  188. $('#' + controlID.id).addClass("favorite active");
  189. }
  190. var v = $('#literal-list').html();
  191. $('#literal-list').html(v + controlID.parentNode.parentNode.outerHTML);
  192. }
  193. else
  194. {
  195. if ($('#' + controlID.id).hasClass('favorite active')) {
  196. $('#' + controlID.id).removeClass("favorite active");
  197. $('#' + controlID.id).addClass("favorite");
  198. }
  199. else
  200. {
  201. $('#' + controlID.id).removeClass("favorite");
  202. $('#' + controlID.id).addClass("favorite active");
  203. }
  204. }
  205. }
  206. }
  208. if ($('#literal-list').find('.literal-offer-product').length == 0) {
  209. $('#literal-list').hide();
  210. $("#no-list").show();
  211. }
  212. else {
  213. $('#literal-list').show();
  214. $("#no-list").hide();
  215. }
  216. }
  217. </script>
  218. </body>
  219. </html>