How to reset div data which I am appending on click? Any help will be thankfull : 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    <script>
       
    $("#button").click(function(){
       
        etc=$("#etc").val();
        
        $.ajax({
            url: 'db4.php',
            type: 'POST',
            data: {
                etc: etc
            },
            error: function() {
                $('#div1').html('<p>An error has occurred</p>');
            },
            success: function(data) {
               
               var result = $.parseJSON((data));
               $.each(result,function(i,field){
                  
                   document.getElementById("div1").innerHTML=field.name;
                   $('#test').append('<h4 id="head1">'+field.name+' </h4>');
                   $('#subasish123').slice(0).hide();
                   
               });
              
               
               }
        });
    });
    </script>

<!-- language: lang-html -->

    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>example subashish</title>
        <script src="jquery-2.1.1.min.js" type="application/javascript"></script>
        </script>
    </head>
    <body id="body1">
    <form >
        <input id="etc" type="text" name="etc">
        <label id="button">Click</label>
    </form>
        <div id="subasish123">
    <div id="div1"></div>
        </div>
        
    </body>
    </html>

<!-- end snippet -->

Here on click I want to reset the append data.So I can get the fresh data by removing the old data. Now actually data is coming but the new data is getting appended with the old data which I need to remove. 