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.

<div id="no-list">
           No Data
       </div>
       <div id="literal-list" class="literal-offer">
           <table style="height: 20px">
               <tbody>
                   <tr>
                       <td style="vertical-align: middle">
                           <h3>Image List</h3>
                       </td>
                   </tr>
               </tbody>
           </table>
           <div class="literal-offer-product">
               <div class="image-wrap">
                   <img class="checkout-offer-img" src="/Images/jerry.png" />
               </div>
               <div class="literal-offer-info">
                   <strong>I am Jerry</strong><br />
                   <a id="removeLiteral0" onclick="javascript:return removeMe(this);">Remove Me</a>
               </div>
           </div>
           <div class="clear"></div>
           <div class="literal-offer-product">
               <div class="image-wrap">
                   <img class="checkout-offer-img" src="/Images/superman.jpg" />
               </div>
               <div class="literal-offer-info">
                   <strong>I am Super Man</strong><br />
                   <a id="removeLiteral1" onclick="javascript:return removeMe(this);">Remove Me</a>
               </div>
           </div>
           <div class="clear"></div>
           <div class="literal-offer-product">
               <div class="image-wrap">
                   <img class="literal-offer-img" src="/Images/skate.png" />
               </div>
               <div class="literal-offer-info">
                   <strong>Skate Board</strong><br />
                   <a id="removeLiteral2" onclick="javascript:return removeMe(this);">Remove Me</a>
               </div>
           </div>
           <div class="clear"></div>
           <div class="literal-offer-product">
               <div class="image-wrap">
                   <img class="literal-offer-img" src="/Images/skate.png" />
               </div>
               <div class="literal-offer-info">
                   <strong>Skate Board</strong><br />
                   <a id="removeLiteral2" onclick="javascript:return removeMe(this);">Remove Me</a>
               </div>
           </div>
       </div>

This is my script.

<script type="text/javascript">
        $("#no-list").hide();
        function removeMe(controlID) {
            var removeDiv = controlID.id;
            $("a[id='" + removeDiv + "']").parent().parent().remove();
            //controlID.parentNode.parentNode.remove();
            if ($('#literal-list').find('.literal-offer-product').length == 0) {
                $('#literal-list').hide();
                $("#no-list").show();
            }
        }
    </script>

Attaching the code of same.