Post
Ask Question

Removing a Section from Div or Literal Dynamically

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" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  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" />  
  51.   
  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" />  
  63.   
  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" />  
  75.   
  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>  
  84.   
  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" />  
  154.   
  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.             }  
  207.   
  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>  
Next Recommended Reading Dynamically Adding And Removing TextBoxes On A Button Click Using jQuery