unable to clear the previous data before apply new data in web api using jquery

Question

I'm working on asp.net 4 web api project

i'm appending data to span using following code:

Using model I'm showing info about all groups

When I clicked on menu's I passed Id and depending upon that fetching new values

But when I click on new Id I'm unable to clear prev data

It is only appending new data with Prev

 $.getJSON(
                    "api/groupvalues/" + id,
                    function (data) {

                        $.each(data, function (index, value) {

                            debugger;
                            if (value.Id != undefined) {

 $("#GroupTemplate").prev().remove();​​​​​​​​​ //UNABLE TO REMOVE PREV DATA

$("#GroupTemplate").tmpl(value).appendTo(".span9"); // IT IS DIRECTLY APPENDING DATA WITH PREV ONE
                            }
                        });    



      <div class="span9">
                    <div class="row">
                        <section id="projects">

                             <!-- End FORACH -->
                        </section>

                    </div>
                </div>

<script id="GroupTemplate" type="text/html">
                        <ul id="thumbs">
                            <!-- Item Project and Filter Name -->
                            <li class="item-thumbs span3 Dhol">
                                <!-- Fancybox - Gallery Enabled - Title - Full Image -->                                

                                <!-- Thumb Image and Description -->
                                <img src="../images/img/work/thumbs/image-01.jpg" alt="">
                           <div style="margin-top:5px;">
                             <div class="verifybtngrp"><span class="font-icon-ok-sign" title="verified account"></span></div>
            <h4 class="profile-namegrp"><a href="#"></a>${Name}</h4>

            <p class="profile-description">
            <span class="font-icon-map-marker-2"></span>${Area}<br />
            <span class="font-icon-music"></span>${Name}<br />
            </p></div> </li>
                            <!-- End Item Project -->
                        </ul>                        
                        </script>

Even I tried all (".span9").html(''); (".span9").remove(); but No Luck

Answer 1

I did like following

$(".span9").html($("#GroupTemplate").removeData());

Answer 2

By the sound of it, you want to clear an element, and then append new data inside it. If that's the case, then instead of removing a node from the DOM, just clear the markup of the node of interest:

 $(".span9").html('');