jquery - How to show div that is display:none if shopping cart is empty of items? -

following logic of code below:

<div id="add-to-cart-widget"> <div class="simplecart_items"><div class="cartheaders"> <div class="itemthumb">thumb</div><div  class="itemtotal">total</div><div class="itemremove">remove</div>  </div> </div> <div id="if-cart-empty" style="display: none">your cart empty.</div> 

items appear in cart if .itemcontainer present. each item added cart, new container created , put inside #add-to-cart-widget.

using jquery, how check if #add-to-cart-widget showing .itemcontainer , if none present show div #if-cart-empty?

------- edit ------- (works in jsfiddle not on site)

this exact code put post on site. added .click event on .itemremove can click "remove" container , test out:

<div id="add-to-cart-widget"> <div class="simplecart_items">     <div class="cartheaders">             <div class="itemthumb">thumb</div>             <div  class="itemtotal">total</div>             <div class="itemremove">remove</div>         </div> </div> <div id="if-cart-empty" style="display:none;">your cart empty.</div>     </div>      <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript">  $(document).ready(function(){ if (!$('.itemcontainer').is(":visible")) {     $('#if-cart-empty').show(); } else {     $('#if-cart-empty').hide(); }  $('.itemremove').click(function(){  $('.itemcontainer').hide(); });     }); </script>  <style type='text/css'>   .itemcontainer {background:red;} </style> 

forgot put link test site:

http://sitetestexample.blogspot.com/p/cart-empty-test.html

this #add-to-cart-widget looks when item added shopping cart (the first code above looks without items in cart) :

<div id="add-to-cart-widget"> <div class="simplecart_items"> <div class="cartheaders"> <div class="itemthumb">thumb</div> <div class="itemtotal">total</div> <div class="itemremove">remove</div></div>     <div class="itemcontainer"><div class="itemthumb">        <img border="0" src="http://3.bp.blogspot.com/-cb2o1hpryro/ub54it3ggvi/aaaaaaaafjy/w6ibiofaggo/s1600/picture+001.jpg"> </div> <div class="itemtotal">$80,000.00</div> <div class="itemremove"><a href="javascript:;" onclick="simplecart.items['c3'].remove();">x</a>  </div></div></div> <div id="if-cart-empty" style="display:none;">your cart empty.</div> </div> 

update answer

demo http://jsfiddle.net/yeyene/bas2m/8/

after remove item, need check again itemcontainer still there or not.

since deleting item, suggest use .remove() instead of .hide()

checkcart();  $('.itemremove').click(function(){         $('.itemcontainer').remove();       checkcart(); });  function checkcart(){     var item = $('.itemcontainer');     if (item.length > 0) {         $('#if-cart-empty').hide();     } else {         $('#if-cart-empty').show();     } }