Deleting an image only after the form is submitted - php

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){ ?>
<?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){ ?>
<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