How can I reset the contents of a div generated by jQuery?

Question

I am using the Onsen UI framework with jQuery and my HTML is like this in its initial state?:

<ons-scroller id="category-list">      
</ons-scroller> 

Then I have a function that populates this div:

function createElement(elementId,elementvalue)
{
   var content = document.getElementById(elementId);
   content.innerHTML=elementvalue;
   ons.compile(content);
}

which is then called in the code as:

if (data.has_menu_category==2){
        var htm='';
        htm+='<ons-list>';
        $.each( data.menu_category, function( key, val ) {            
             htm+='<ons-list-item modifier="tappable" class="row" onclick="loadmenu('+
             val.cat_id+','+val.merchant_id+');">'+val.category_name+' <span style="float:right;">'+val.items_count+'</span></ons-list-item>';
        }); 
        htm+='</ons-list>';
        createElement('category-list',htm); 
}

The category-list is then populated with items. I cannot figure out however how to RESET that list back to initial state. Basically back to

<ons-scroller id="category-list">      
</ons-scroller> 

How can I do that?

Answer 1

You can simply set the html to an empty string.

jQuery way:

$('#category-list').html('');

core javascript way:

document.getElementById('category-list').innerHTML = '';