Clear div before appending

Question

Im currently unable to clear the container div before appending new elements. (The whole div is wiped clean when empty(), i dont want this. I simple want to remove the existing book holder elements. Is there something I'm doing it wrong? and/or could this because of the "text/template" script?)

HTML snippet

<div class="component">
    <ul id="Maincontainer" class="align">
        <script type="text/template" id="template">
             <li id="bookHolder" class="bookHolder">
                <figure class="book">
                <!-- Front -->
                    <ul class="hardcover_front">
                        <li>
                            <img src="{{imgURL}}" alt="" width="100%" height="100%">
                        </li>
                        <li></li>
                    </ul>

                </figure>
            </li>
        </script>
    </ul>
</div>

JQUERY snippet

$.get( "URL", function(data) {
        var entry = $(data).find("entry");
        entry.each(function() {
            var template = $("#template").html();
            //$("#Maincontainer").remove(); - >clear whole div, appended elements not show
            //$("#Maincontainer").remove("#bookHolder"); -> Div not cleared
            $("#Maincontainer").append(template.replace("{{bookName}}", 
bookName).replace("{{summary}}", summary).replace("{{price}}", price).replace("{{seller}}", artist).replace("{{imgURL}}", image)
.replace("{{href}}", href).replace("{{category}}", category));
        });
   });

Answer 1

You can remove elements from DOM using the remove method of jQuery:

$(".bookHolder").remove();

Answer 2

If you want to remove the entire dive then you can use

$(".bookHolder").remove();

Or if you just want to append some data to $(".bookHolder") then you should clear the dive before like you need to remove the div content, and for that you can use

$(".bookHolder").html("");

which will clear the the entire div content.