无法清空html5模板标记

Question

这是我的模板：

<template data-template-toolbar>
    <div>
    [code removed for brevity]
    </div>
    <div data-ckit-full>
        <div class="ckit-container">
                <div class="ckit-container__hd" data-header>
                <template data-default-header>
                    [code removed for bevity]

                </template>
                <template data-new-header>
                [code removed for bevity]
                    </template>
                    <template data-body>
                        <div data-container-body>
                                [code removed for bevity]
                                 <div data-body-kit>
                                    <template data-conversations>
                                     <a href="javascript:void(0);">
                                        <div>
                                            [code removed for bevity]
                                        </div>
                                     </a>
                                     </template>
                                 </div>
                        </div>
                        <div data-default-footer>
                                [code removed for bevity]
                        </div>

                         <div data-new-footer hidden>
                         [code removed for bevity]
                    </div> 
                 </template>
        </div>
    </div>
</template>

这就是我将通过ajax提取的内容附加到模板的方式：

var counter = content['dataSetReceived'].contacts.length;
    this.beforeLoad(content['argumentsSent']['sweep']);
    var template = $('[data-conversations]').html();
    console.debug(template);
    contactLoaded += parseInt(counter); 
    for (var i = 0; i < counter; i++) {

        template = $(template).clone();
        template.find('[data-conversation-user-name]').html(content['dataSetReceived'].contacts[i].name);
        template.find('[data-conversation-notify]').html(content['dataSetReceived'].contacts[i].notification);
        template.find('[data-conversation-time-lapse]').html(content['dataSetReceived'].contacts[i].lastseen);
        template.find('[data-conversation-avatars]').attr('src', content['dataSetReceived'].contacts[i].avatar);

        wrapper.append(template);

    }

我无法清空模板本身，但如果我清空模板的包装div，则所有内容都会清空，包括模板：

//This function is responsible to empty the wrapper dom before appending new content to it. The problem now is, I'm not sure how to empty it correctly.

beforeLoad: function() {
     $('[data-conversations]').empty();//doesn't do anything
     $('[data-body-kit]').empty();//all goes empty and template is undefined
     $('[data-body-kit] a').empty();//empties prev html before appending but leaves some gap on top which means it doesn't fully emptied the html
 }