Question

I have a div within which elements are dynamically added and removed. I’d like to present a number somewhere that keeps track of the new total number of elements within this div.

I was using .length() to find the number of elements, stored in a variable. I’m not sure how to present that variable/value in the html though.

<span> "" + list_Count</span>

The above doesn’t work.

I’m also not sure how to get this to update dynamically, i figured if the counts were a function, then i could run the function whenever the functions that change things are run.

Answer 1

Update the <span> element with your value:

<span class="current_count">0</span>
<script type="text/javascript">
  function updateCount() {
    $("span.current_count").text( $(".container").children().length );
  }
</script>

Call the updateCount() function each time you modify the number of children in your parent element.

$("a.addDiv").click(function(e){
  e.preventDefault();
  $("<div>").text("New Div").appendTo(".container");
  updateCount();
});

Online demo: http://jsbin.com/etivu3/edit