How to show the div that is displayed: no if there are no items in the basket?

Question

Following the logic of the 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 is empty.</div> 

Items are only shown in the .itemContainer if .itemContainer present. For each item added to the cart, a new container is created and placed inside the #add-to-cart-widget .

Using jQuery, how to check if #add-to-cart-widget .itemContainer , and if none of them are present then show div #if-cart-empty ?

------- EDIT ------- (works in jsFiddle, but not on the site)

This is the exact code that I entered in the message on my site. I added an extra .click event to .itemremove so that you can click the "delete" container and check it:

 <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 is 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 to put a link to a test site:

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

It looks like #add-to-cart-widget when an item is added to the shopping cart (the first code above is how it looks without items in the 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 is empty.</div> </div> 

Answer 1

UPDATE ANSWER

DEMO http://jsfiddle.net/yeyene/BAs2m/8/

After deleting an item, you need to check again that the Container item still exists or not.

Since you are deleting an element, I suggest using .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(); } } 

Answer 2

something like this will work:

 function check_cart(){ n = $('.itemContainer .itemthumb').length; if(n>0){ $('.itemContainer').css('display','block'); $('#if-cart-empty').css('display','none'); }else{ $('.itemContainer').css('display','none'); $('#if-cart-empty').css('display','block'); } } $(document).ready(function(){ $('.itemremove, .itemadd').click(function(){ check_cart(); }); });