删除数据库中的数据而不重新加载页面

I want to delete data from database without refreshing the page. My code is working but after deleteing a product needs to refresh the page. I want something like this

Here is my js code:

<script>
    $(document).on('click', '.delete-it', function() {
        var id = $(this).attr('delete-id');
        bootbox.confirm("Are you sure?", function(result) {
            if (result) {
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "delete_product.php",
                    data: {
                        object_id: id
                    },
                    dataType: 'json',
                    success: function(data) {
                        location.reload();
                    }
                });
            }
        });
        return false;
    });
</script>

and the delete_product php code:

<?php
// check if value was posted
if($_POST){



    // get database connection
    $database = new Database();
    $db = $database->getConnection();

    // prepare product object
    $product = new Product($db);

    // set product id to be deleted
    $product->id = $_POST['object_id'];

    // delete the product
    if($product->delete()){
        echo "Object was deleted.";
    }

    // if unable to delete the product
    else{
        echo "Unable to delete object.";

    }
}
?>

Please show me a way to make it!

I see no place where the you're targeting something in the page, but this is what I would use:

<script>
function swapContent(href, url_data, target) {
    $.ajax({
        type: 'GET',
        cache: false,
        url: href+'?' + url_data,  //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data
        success: function (data) { // this param name was confusing, I have changed it to the "normal" name to make it clear that it contains the data returned from the request
            //load more data to "target" value div
            target.innerHTML = (data); // as above, data holds the result of the request, so all the data returned from your results.php file are in this param but please see below
        }
    })

}
    $(document).on('click', '.delete-it', function() {
        var id = $(this).attr('delete-id');
        bootbox.confirm("Are you sure?", function(result) {
            if (result) {
         swapContent(base_url, url_data, target) //set variables
   }
        });
        return false;
    });
</script>

note: because of how much ajax I use, I keep an ajax function by itself