javascript - 需要添加删除按钮或符号以从数据库中删除检索到的图像

Question

我使用下面的 PHP 代码创建了一个图片库，它将从数据库中检索图片。

如何为图像添加删除符号，以便在从数据库中检索后删除它？

<div class="container">
<h1>Dynamic Image Gallery </h1>
<div class="gallery">
    <div class="card">
    <?php
    //Include database configuration file
    include('dbConfig.php');

    //get images from database
    $query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC");

    if($query->num_rows > 0){
        while($row = $query->fetch_assoc()){
            $imageThumbURL = '  images/thumb/'.$row["file_name"];
            $imageURL = 'images/'.$row["file_name"];
    ?>
        <a href="<?php echo $imageURL; ?>" data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" >
            <img src="<?php echo $imageThumbURL; ?>" alt="" />
        </a>
    <?php }
    } ?>
    </div>
</div>

Answer 1

像下面这样尝试，在使用任何内部表单提交的 ajax 方法之后。

        <div class="img_wrapper" >
        	<form action="action to delete" method="POST" class="de_img">
               <input type="submit" value="X" class="img_close">
               <input type="hidden" NAME="deleteable_id" VALUE="">
            </form>
            <img src="<?php echo $imageThumbURL; ?>" alt="" />
        </div>


        <style>
        .img_close {
            position: absolute;
            top: -9px;
            right: -9px;
            border-radius:50%;
            background-color:pink; 
            cursor: pointer;
        }
        .img_wrapper img{
        width:100%;
        }
        .img_wrapper{
        position:relative;
        width:100px;
        height:100px;
        background-color:#ccc;
        margin:2px;
        }
        </style>
        if you use jquery
        <script>
         $('.de_img').submit(function(event){
                event.preventDefault();
                $.ajax({
                    type        : 'POST',
                    url         : "<?php echo URL Here ?>", 
                    data        : new FormData(this),
                    contentType:false,
                    processData:false,
                })
               .done(function(data,status){
                    //echo Success or fail from submit url
                    if(status=='success'){
                    }else{
                    }
                });
            });
        </script>