php - Deleting an image only after the form is submitted

Question

After a picture is uploaded I want to let the user have the option to delete it by clicking on the 'x' on the image. I tried some jquery codes that I searched online but nothing had the result I want. Is there a way to remove the image from the database only when the submit button is clicked rather than redirecting to a delete page and then having to go back to delete another image?

if($res18 && mysql_num_rows($res18) > 0){
    while($row18 = mysql_fetch_assoc($res18)){

        if (file_exists($row18['images']) === true){    ?>
            <a href="javascript:return(0);" class="addition_images_close" onclick="delete('<?php echo $row18['id']; ?>')""></a>
            <?php                                   
            //mysql_query("DELETE FROM `images` WHERE `images`='".$row18['images']."' AND `ad_id` = '".$id."'");            
            echo '<img src="'.$row18['id'].'" class="pictures">';       
        }
    }
} 

insert quesry:

mysql_query("INSERT INTO `images` ($fields) VALUES ($data)");

I assume the logic would be somewhat like this: Once the 'x' link is clicked, run a function that runs the delete query.

Any help is appreciated!

UPDATE:

$res18 = mysql_query("SELECT * FROM `images` WHERE `ad_id` = '" . $id . "'");
    if($res18 && mysql_num_rows($res18) > 0){
        while($row18 = mysql_fetch_assoc($res18)){
            $picture = $row18['images'];
            $pic_id = $row18['id'];

            if (file_exists($picture) === true){ ?>
                <a href="javascript:return(0);" class="addition_images_close" data-id=<?php echo $pic_id ?> id="a-<?php echo $pic_id ?>"></a>                                       
                 <img src="<?php echo $picture ?>"  id="img-<?php echo $picture ?>" class="pictures">
            <?php                   
            }
        }
    } 

<script type="text/javascript">
    $(document).ready(function(){
        // set onclick for all 'a' elements having the 'addition_image_close' class
        $('a.addition_images_close').click(function() {
            var $pic_id = $(this).prop('data-id');
            var $picture = $(this).prop('data-id');
            // post to delete.php, sending id=$picture as data and setting success handler
            $.post('delete.php', {id: $picture}, function() {
                // remove elements from page
                $('#img-' + $picture).remove();
                $('#a-' + $pic_id).remove();
            });
        });
    });
</script>

and the delete.php has the following:

$id = $_GET['id'];
mysql_query("DELETE FROM `images` WHERE `ad_id` = '".$id."'");

Answer 1

a list.php could be something like this:

<?php

// ...

// render list
if($res18 && mysql_num_rows($res18) > 0) {
    while($row18 = mysql_fetch_assoc($res18)) {
        if (file_exists($row18['images']) === true){    ?>
            <a href="javascript:return(0);"
                class="addition_images_close"
                data-id=<?php echo $row18['id'] ?>
                id="a-<?php echo $row18['id'] ?>"
            >X</a>
            <img src="<?php echo $row18['id'] ?>"
                id="img-<?php echo $row18['id'] ?>"
                class="pictures">
        }
    }
}
?>
<!-- add actions on the links rendered above -->
<script type="text/javascript">
    // do this when page is loaded
    $(document).ready(function(){
        // set onclick for all 'a' elements ahving the 'addition_image_close' class
        $('a.addition_image_close').click(function() {
            var $id = $(this).prop('data-id');
            // post to delete.php, sending id=$id as data and setting success handler
            $.post('delete.php', {id: $id}, function() {
                // remove elements from page
                $('#img-' + $id).remove();
                $('#a-' + $id).remove();
            });
        });
    });

with a delete.php receiving an id parameter and performing the delete query