Javascript 创建N个单独的删除表单

我正在尝试编写一个类似论坛的应用程序，用户可以在其中添加评论（保存在数据库中），并为每个评论附加多达3个文件

    // SQL query to SELECT comments from database
   
    // Echo out all comments
    foreach ($resultCom as $row) {
        echo $commentContent;

    // Echo out up to 3 files for each comment
                    if (isset($commentFile1) {
                        echo "<a class='file-download' href='upload/$commentFile1'>$commentFileName1</a>";
                        }
                        if (isset($commentFile2) {
                        echo "<a class='file-download' href='upload/$commentFile2'>$commentFileName2</a>";
                        }
                        if (isset($commentFile3) {
                        echo "<a class='file-download' href='upload/$commentFile3'> $commentFileName3</a>";
                        }
}

我尝试了几种方法，但都失败了。如果能提示我如何使用每个文件的唯一属性（文件名、文件id等）为每个文件设置删除表单，我将不胜感激

---

这是最好的方法。是使用AJAX，但如果必须使用PHP，请执行以下操作：

<?php  
    if (isset($_POST['filename'])) {

        $name = $_POST['filename'];
        $id= $_POST['id'];
        
        //Direction where you store your files
        $target_dir = "/";

        // If u store it by name then do this:
        $target_file = $target_dir . $name;

        // If you store it by id then do this:
        // $target_file = $target_dir . $id; 

        if (file_exists($target_file)) {
            if(unlink($target_file)){
                echo "File". $name ." was removed.";

             }else{
                echo "Error!". $name . "was not removed";
            }   
        }else{
            echo "Could not find file". $name;
        }
    }
?>

我的想法是创建如下元素结构：

<div data-name="name" data-id="id">
     <a>IMAGE HERE</a>
     <button class="delete-file">DELETE</button>
</div>

document.find(".deleteFile").click(function(){
    deleteFile(this.parent().dataset.id, this.parent().dataset.name);
});

如果你有什么问题，或者不理解某事，现在就让我来

小编辑：正如评论中所说的，您需要额外的sanitazer来保证文件名的安全，而不需要注入。下面是一个简单的例子（如果您需要更高级的，您应该在web上查找）：

---

学习ajax，然后单击delete链接，它会发出删除上传文件的请求，使用表单会导致用户浏览器同时重新加载etcin，而您正在学习ajax，为什么不能在呈现链接时用php创建表单，然后将输入

值
属性设置为当前文件的值？非常感谢您的详细回答。我喜欢AJAX答案看起来多么干净，所以在尝试了php解决方案之后，我一定会研究这个问题<代码>“是否确实要删除“+name+”？”
。。。我想你的意思是
文件名
？我对你的建议有安全顾虑。当坏人开始在文件路径中添加点并继续删除他们应该删除的文件时会发生什么？该戴上消毒手套了。值得深思。谢谢你纠正了我的错误，当然你需要在这里进行消毒，我忘了提到这一点，但我相信@sojutyp会记住这一点，或者会创建良好的存储数据系统。
const deleteFiles = (id, filename) => {
    
    //Ask if your user wants to delete file
    let confirmDelete =  confirm("Are you sure you want to delete " + filename + "?");

    //If yes, its doing this
    if(confirmDelete){
        $.post("php/deleteFile.php",
            {
                id: id,
                filename: filename
            },
            function(response){
                alert(response);
            }
        );
    }
};

<div data-name="name" data-id="id">
     <a>IMAGE HERE</a>
     <button class="delete-file">DELETE</button>
</div>

document.find(".deleteFile").click(function(){
    deleteFile(this.parent().dataset.id, this.parent().dataset.name);
});

$name = mb_ereg_replace("([^\w\s\d\-_~,;\[\]\(\).])", '', $name );