JQuery Ajax complete function executes right away

I have a JQuery Ajax function which executes a php script which deletes some items in a MySql database. This ajax call is made whenever the user clicks a certain button. I want the page to reload when the call is complete and the deleted items not to be displayed. However, the 'complete' feature seems to execute before the php script is complete. Hence, the page reloads without deleting the items in the database. There is no form involved, just a button. How can I fix this?

<button id="deleteButton">Delete</button>


$('#deleteButton').click(function(){

   $.ajax({
      url:'clearDatabase.php',
      dataType:"json",
      data:{data:data},       
      type:'POST',      
      success:function(data){       
           if(data=="0"){
              alert("stuff deleted");
           }
      },    
      complete: function(XMLHttpRequest, status) {            
                    location.reload();
      }
   });  


});