Question

I am calling the server every 5 secs to get the data, then looping through my list and appending a “span” with the right data to my list. The problem is i can’t make the “span” dissapear when data returned from the server is empty, except when i use “fadeOut()” on the “span”. But then i can’t calculate the right sum of all the “li span” (countCont() ), since they are still appended to the DOM and have a value.
So what i would like to do is remove the respective “li span” if data returned from the server that is assigned to it is empty, so i can calculate the right sum.
Here is how i assign data to my list:

     $.get(url, function (data) {
        $.each(data, function (i, info) {
          $("#accordion li").text(function (y, name) {
            if ($(this).is(":contains(" + info.cName + ")")) {
                if ($(this).is(":has(span)")) {
                    $(this).children().replaceWith('<span class = "cCount">' + info.count + '</span>');
                    $(this).children().fadeOut(10000);
                } else {
                    $(this).append('<span class = "cCount">' + info.count + '</span>');
                }
             }

             countCont($(this).parent().attr('id'));
          });
       });
    });

Answer 1

After you fade it out, remove it from the DOM using .remove()

//...
$("#accordion li").text(function (y, name) {
   var $this = $(this); //also store this, dont select it 5 times

   if ($this.is(":contains(" + info.cName + ")")) {
      if ($this.is(":has(span)")) {
         $this.children().replaceWith('<span class = "cCount">' + info.count + '</span>');
         $this.children().fadeOut(10000);
         $this.remove();
      } else {
         $this.append('<span class = "cCount">' + info.count + '</span>');
      }
   }
   countCont($this.parent().attr('id'));
});

Edit: In response to the comment, this will remove the span if it exists then add a new one on:

//...

var $this = $(this); //also store this, dont select it 5 times

if ($this.is(":contains(" + info.cName + ")")) {
   if ($this.is(":has(span)")) {
      //remove the span
      var $span = $('span', this);
      $span.fadeOut(10000);
      $span.remove();
   }
   //always append new span
   $this.append('<span class = "cCount">' + info.count + '</span>');
}