Question

I have an unordered list (each list element contains some further markup but this should not matter) that is constructed (instantiated and appended) from an AJAX call to the DB. I want to clear the list before any following AJAX call results are made.

$('#list').empty()

Does not work for some reason (I have tried many alternative schema with .remove() and .not() as well with no success). I know I am targeting the items correctly because I can change the css etc.
Best I can do is delete an element by class from within each li by:

$('list li .class').remove()

Am I doing something fundamentally wrong here?

Btw the list elements are being rendered using Mustache but that should not matter as once rendered it is simply HTML markup, or am I wrong here too?

Thanks for any help.

---

[EDIT]
Ok so no luck getting any decent AJAX response on jsfiddle so here is the essence AJAX function call:

function loadResults() {
$.ajax({
    'type' : 'POST',
    'url' : '/lib/ajax.php',
    'data' :    {
            'data1' : $('#data1').text(),
            'data2' : $('#data2').text(),
            'data3' : $('#data3').text()
            },
    'success' : function(data) {

           data = JSON.parse(data);

           // remove old results and add new results iteratively
           $('#results ul').empty();

           $.each(data, function(i, elem) {

              // Load the template
              $.get('/views/default/templates/elem_tpl.html', function(t) {
                       tmpl = t;
                   });

               $(document).ajaxStop(function() {
                   var template = Mustache.render(tmpl, elem);
                   $('#results ul').append(template);
               });
            });
        }
});

}

The HTML is literally just a basic list for testing purposes:

<div id="results">
     <ul>
     </ul>
</div>

If that helps any.

Answer 1

Not exactly the answer but to anyone who encounters a similar issue when using Mustache for some dynamic templating my solution was to switch to underscore.js for the client side templates.

You do not need to modify any of your templates (mine are in external files so this saved time) if you just add the following prior to calling the template(s):

_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};

Worked perfectly first time. I don’t know what Mustache was doing to confuse jQuery I will try look into this when I have more time on my hands.