Post
Ask Question

Removing a Section from Div or literal Dynamically

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

My design which is static but this one is actually I am framing dynamically in my application and also here I am showing one section where as in my application there are multiple section where I can have duplicate records. When I am removing data I need to make inactive in one section and need to remove entire div in one section. 
  1. <div id="no-list">  
  2.            No Data  
  3.        </div>  
  4.        <div id="literal-list" class="literal-offer">  
  5.            <table style="height: 20px">  
  6.                <tbody>  
  7.                    <tr>  
  8.                        <td style="vertical-align: middle">  
  9.                            <h3>Image List</h3>  
  10.                        </td>  
  11.                    </tr>  
  12.                </tbody>  
  13.            </table>  
  14.            <div class="literal-offer-product">  
  15.                <div class="image-wrap">  
  16.                    <img class="checkout-offer-img" src="/Images/jerry.png" />  
  17.                </div>  
  18.                <div class="literal-offer-info">  
  19.                    <strong>I am Jerry</strong><br />  
  20.                    <a id="removeLiteral0" onclick="javascript:return removeMe(this);">Remove Me</a>  
  21.                </div>  
  22.            </div>  
  23.            <div class="clear"></div>  
  24.            <div class="literal-offer-product">  
  25.                <div class="image-wrap">  
  26.                    <img class="checkout-offer-img" src="/Images/superman.jpg" />  
  27.                </div>  
  28.                <div class="literal-offer-info">  
  29.                    <strong>I am Super Man</strong><br />  
  30.                    <a id="removeLiteral1" onclick="javascript:return removeMe(this);">Remove Me</a>  
  31.                </div>  
  32.            </div>  
  33.            <div class="clear"></div>  
  34.            <div class="literal-offer-product">  
  35.                <div class="image-wrap">  
  36.                    <img class="literal-offer-img" src="/Images/skate.png" />  
  37.                </div>  
  38.                <div class="literal-offer-info">  
  39.                    <strong>Skate Board</strong><br />  
  40.                    <a id="removeLiteral2" onclick="javascript:return removeMe(this);">Remove Me</a>  
  41.                </div>  
  42.            </div>  
  43.            <div class="clear"></div>  
  44.            <div class="literal-offer-product">  
  45.                <div class="image-wrap">  
  46.                    <img class="literal-offer-img" src="/Images/skate.png" />  
  47.                </div>  
  48.                <div class="literal-offer-info">  
  49.                    <strong>Skate Board</strong><br />  
  50.                    <a id="removeLiteral2" onclick="javascript:return removeMe(this);">Remove Me</a>  
  51.                </div>  
  52.            </div>  
  53.        </div>  
This is my script.
  1. <script type="text/javascript">  
  2.         $("#no-list").hide();  
  3.         function removeMe(controlID) {  
  4.             var removeDiv = controlID.id;  
  5.             $("a[id='" + removeDiv + "']").parent().parent().remove();  
  6.             //controlID.parentNode.parentNode.remove();  
  7.             if ($('#literal-list').find('.literal-offer-product').length == 0) {  
  8.                 $('#literal-list').hide();  
  9.                 $("#no-list").show();  
  10.             }  
  11.         }  
  12.     </script>  
Attaching the code of same.