How to replace a div content with other div using jquery or Javascript?

Question

Hi all i am having some which i am appending to a div dynamically in my view....i have three ajax calls for different methods....firstly i show all the images of product in a div ....and if a user selects the price range the proucts will be displayed of that price range only and same for colours..what i want is i want this when user selects price range or color the div with all images should be replaced with the new images how can i do this can any one help me here

    <script type="text/javascript">
     $(document).ready(function () {            
         $.getJSON("/api/ProductLayout", function (data) {                 
             $.each(data, function (idx, ele) {
                 $("#makeMeScrollable").append('ProdcutID'+'<span>' + ele.ProductID +
                                  '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
                 $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
             });
             scrollablediv();
         });
     });
     function scrollablediv() {             
         $("div#makeMeScrollable").smoothDivScroll({
             mousewheelScrolling: true,
             manualContinuousScrolling: true,
             visibleHotSpotBackgrounds: "always",
             autoScrollingMode: "onstart"
         });
     }
</script>
<script type="text/javascript">
    $(function () {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [0,0],
            slide: function (event, ui) {
                $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            },
            change: function (event, ui) {
                // when the user change the slider
            },
            stop: function (event, ui) {
                // when the user stopped changing the slider                    
                $.get("/api/ProductLayout", { firstPrice: ui.values[0], secondPrice: ui.values[1] }, function (data) {                        
                    $.each(data, function (idx, ele) {
                        $("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
                                  '</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span>');
                        $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
                    });                        
                });
            }
        });
        $("#amount").val("$" + $("#slider-range").slider("values", 0) +
        " - $" + $("#slider-range").slider("values", 1));
    });
</script>
<script type="text/javascript">
    function getproductbycolor(colours) {
        alert(1);
        $.get("/api/ProductLayout", { color: colours }, function (data) {
            alert(data.toString());
            $.each(data, function (idx, ele) {
                $("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
                                  '</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span><br/><label>Product Color:</label><span>'+ele.ProductColor+'</span>');
                $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
            });
        });
    }

</script>

and this is my html

   <div id="makeMeScrollable" style="height: 400px; width: 400px;">

</div>

i should append all the images only to the above div replacing the previous images

Answer 1

As said by jaswant you can use .empty() method but not .empty().append() what this does is it will empty the data when ever an new record is binded so use .empty() method before your ajax call or json call

      $("#makeMeScrollable").empty();

add the above line before your ajax call

  <script type="text/javascript">
function getproductbycolor(colours) {
    alert(1);
   $("#makeMeScrollable").empty();
    $.get("/api/ProductLayout", { color: colours }, function (data) {
        alert(data.toString());
        $.each(data, function (idx, ele) {
            $("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
                              '</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span><br/><label>Product Color:</label><span>'+ele.ProductColor+'</span>');
            $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
        });
    });
}

Answer 2

Try this,

$("#makeMeScrollable").html('ProdcutID<span>' + ele.ProductID +
  '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + 
  ele.Price + '</span><img src="' + ele.ImageURL + '" />'); 

You can always use html() in place of append() to remove the existing content.

or you can do empty the element before append with .empty().append()

EDIT (after comments)

 var $div = $("#makeMeScrollable");
    $div.empty();
    $.each(data, function (idx, ele) {.append('ProdcutID' + '<span>' + ele.ProductID + '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
        $("<img/>").attr({
            src: ele.ImageURL
        }).appendTo("#makeMeScrollable");
    });

Answer 3

You should do the empty as the first action in your success handler. Because the calls are asynchroneous, you will have the risk of products interfering with each other if you clear the area before you do the ajax call.

$(document).ready(function () {            
  $.getJSON("/api/ProductLayout").success(function (data) {
    clearProductDisplayArea();
    displayProductInfo(data);
    scrollablediv();
  });
});

function clearProductDisplayArea(){
  $("#makeMeScrollable").empty();
}

function displayProductInfo(data){
  $.each(data, function (idx, ele) {
    $("#makeMeScrollable").append('ProdcutID'+'<span>' + ele.ProductID +
       '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
    $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
  });
}