CODEWITHSUNDEEP
javascriptjqueryhtml
valerio0999
valerio0999

Reputation: 12136

counting visible elements on click

i have cart with some items already inside. on load, my script counts how many I have and display it in a div with a number.

each item has a remove button and when i remove an item, i expect my number to update, but it doesn't.

here's my fiddle: https://jsfiddle.net/vlrprbttst/99c8gn7k/7/

i have two questions:

1) i've intentionally put the function outside the document ready function so that i can reuse it. works fine onload using countItems.init(); but doesn't work using it this way:

  $(".remove-item").on("click",function(){
    $(this).closest("li").hide();
    countItems.init();
  });

why?

2) how do i make it perform the countItems.init(); function again on click when I remove an item to refresh the number of li items?

Upvotes: 1

Views: 247

Answers (3)

Stonehenge
Stonehenge

Reputation: 20

A variable is assigned a value not an expression. Meaning the expression: $(".cart li:visible").length is interpreted by javascript as an integer value of 3 not $(".cart li:visible").length

By moving the basketItems variable declaration to inside the init function makes sure to grab the current length every time the function is ran, instead of just when the page is first initialized.

To grab an updated count, you need to run your init function within remove-item click event just like you tried. So the updated javascript and fiddle looks like this:

var countItems = {
    init: function() {
      var basketItems = $(".cart li:visible").length;
      $(".items").text(basketItems);
    }
  }

$(document).ready(function(){

  countItems.init();

  $(".remove-item").on("click",function(){
    $(this).closest("li").hide();
    countItems.init();
  });

});

https://jsfiddle.net/1a60qh5k/

Upvotes: 0

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

Some refactor on your code and calling basketItems.count() every time an item is been removed: 

var basketItems = {
    count: function() {
        $('.items').text($('.cart li:visible').length);
    }
};
$(document).ready(function() {
    basketItems.count();
    $('.remove-item').on('click', function() {
        $(this).closest('li').remove();
        basketItems.count();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="basket">
  my basket
  <span class="items"></span>
    <ul class="cart">
      <li>phone | <a href="#" class="remove-item">x</a></li>
      <li>cartridge | <a href="#" class="remove-item">x</a></li>
      <li>neogeo | <a href="#" class="remove-item">x</a></li>
    </ul>
</div>

<br>
<br>
<br>
<img src="http://placehold.it/200x200" alt="product"><br>
<a href="#">add</a>

Upvotes: 1

Satpal
Satpal

Reputation: 133413

You are continuously setting the count of visible element when page was loaded. Use the filter() method to get visible elements

Use

var basketItems = $(".cart li"); //Store the reference of element 
var countItems = {
    init: function() {
        //
        var visbleElements = basketItems.filter(":visible").length;
        $(".items").text(visbleElements);
    }
}

Fiddle

Upvotes: 1

Related Questions