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

Question

Following the logic of the code below: ```

thumb

Total

remove

``` Items only appear in cart if `.itemContainer` is present. For each item added to cart, a new container is created and put inside `#add-to-cart-widget`. Using jQuery, how do I check if `#add-to-cart-widget` is showing `.itemContainer` and if none present then show div `#if-cart-empty`? ------- EDIT ------- (works in jsFiddle but not on site) This is the exact code that I put into the post on my site. I added an extra `.click` event on `.itemremove` so you can click the "remove" container and test it out: ```

Accepted Answer

UPDATE ANSWER

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

After you remove the item, you need to check again the itemContainer is still there or not.

Since you are deleting item, I suggest to 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();
    }
}
```

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

Solution

Problem