Clear div before adding

Question

Currently, I cannot clear the div container before adding new elements. (The whole div is cleared when empty(), I don’t want this. I just want to delete the existing elements of the book holder. Is there something that I am doing wrong, and / or maybe this is due to 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 code 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 the DOM using the remove jQuery method:

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

Answer 2

If you want to delete the entire dive, you can use

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

, $( ". bookHolder" ), , div,

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

div.

Answer 3

to try. $ ("# Maincontainer") find ("#") Bookstore delete () ;.