[AJAX] Affichage Images avec ajax

Bonjour chers developpeurs,
je suis bloqué depuis quelques heures sur ces probleme, voilà apres upload de mes images je renvoi les images uploadées au navigateur par ajax tous se passe bien voici ma préoccupation est: par un clik sur le bouton supprimmer je veux supprimer l'image nouvellement ajouter avec ajax sans actualiser la page au préalable, du coup ca ne passe pas il faut d'abord actualiser la page pour que l'image puis etre supprimmable.
voici ma fonction getImage qui affiche les images au navigateur:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
         $(document).ready(function () {
                getImages(0, <?php echo $numRows ?>);
            });
            function getImages(start, max) {
                if (start > max)
                    return;
                $.ajax({
                    url: '<?= WEBROOT;?>functions/putonline.php',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        getImages: 1,
                        start: start
                    }, success: function (response) {
                        for (var i=0; i < response.images.length; i++)
                          addImage("../img/thumbnail/min130/" + response.images[i].path, response.images[i].id);
                    }
                });
            }
 </script>
 if (isset($_POST['getImages'])) {
$sql = $db->query("SELECT id, name FROM images");
$photos = $sql -> fetchAll(); 
$response = array();
foreach ($photos as $getphoto) {
$response[] = array("path" => $getphoto['name'], "id" => $getphoto['id']);
}
exit(json_encode(array("images" => $response)));
    }

fonction upload image :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
 
            $(function () {
               var files = $("#files");
 
               $("#fileupload").fileupload({
                   url: 'edit.php',
                   dropZone: '#dropZone',
                   dataType: 'json',
                   autoUpload: false
               }).on('fileuploadadd', function (e, data) {
                   var fileTypeAllowed = /.\.(gif|jpg|png|jpeg)$/i;
                   var fileName = data.originalFiles[0]['name'];
                   var fileSize = data.originalFiles[0]['size'];
 
               }).on('fileuploaddone', function(e, data) {
               	    var status = data.jqXHR.responseJSON.status;
                    var msg = data.jqXHR.responseJSON.msg;
 
                    if (status == 1) {
                        var path = data.jqXHR.responseJSON.path;
                        addImage(path, 0);
                    }
                    else
                        $("#error").html(msg);
               });
            });
 
             function addImage(path, id) {
                if ($("#uploadedFiles").find('.row:last').find('.myImg').length === 4)
                    $("#uploadedFiles").append('<div class="row"></div>');
 
                    $("#uploadedFiles").find('.row:last').append('<div id="img_'+id+'"><img class="img_edit" src="'+path+'" /><a onclick="delImg('+id+')">Delete</a> </div>');
            }
        </script>

et enfin la fonction qui supprime l'image:

Code:

1
2
3
4
5
6
 
if (isset($_POST['delImage'])){ 
$id_img = $db->quote($_POST['id']);
$db->query("DELETE FROM images where id = $id_img");
exit("Image deleted");
 }

ma question: pouvez-vous améliorer mon code pour qu' apres upload et affichage des images que j'ai la possiblité de les supprimer sans actualiser la page au préalable? merci d'avance