Javascript Jquery在单击div后从数据库中删除数据

我想制作一种警报系统，在用户屏幕上弹出警报，但我有一个主要问题，我不知道如何完全删除该div，我知道我需要将其从数据库中删除，但这正是我遇到的问题，我似乎找不到从数据库中获取div的ID以用于从数据库中删除的方法。 这是我的尝试

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>    
$(document).ready(function()
{

    $(".alert").draggable();    
    $(".alert").click(function()
    {           
        var test = $("#warning").val();
        alert(test);
        $(this).fadeOut("fast");

    }); 
}); 
</script>
<style>
#warning
{   
    width:150px;
    height:150px;
    border:1px solid red;
    background-color:rgb(230, 30, 30);
    border-radius:5px;
    padding:5px;    
}   
#notice
{   
    width:150px;
    height:150px;
    border:1px solid yellow;
    background-color:rgb(230, 80, 30);
    border-radius:5px;
    padding:5px;    
}   
#generic
{   
    width:150px;
    height:150px;
    border:1px solid grey;
    background-color:rgb(150, 150, 150);
    border-radius:5px;
    padding:5px;    
}
.blue
{   
    font-weight:bold;   
}   
</style>
<?php
function display_alerts($user_id)
{   
    $connect = mysqli_connect("localhost", "root", "asdfghjkl", "database");
    $query = mysqli_query($connect, "SELECT * FROM `alerts` WHERE `user` = '$user_id'");
    while($row = mysqli_fetch_assoc($query))
    {       
    ?>          
        <div id="<?php echo $row["style"]; ?>" value = "<?php echo $row["id"]; ?>" class="alert"><?php echo $row["message"]; ?></div>
        <?php       
    }       
}
display_alerts("10");
?>

$（文档）.ready（函数（）
{
$（“.alert”）.draggable（）；
$（“.alert”）。单击（函数（）
{           
var test=$（“#警告”）.val（）；
警报（测试）；
美元（本）。淡出（“快速”）；
}); 
}); 
#警告
{   
宽度：150px；
高度：150像素；
边框：1px纯红；
背景色：rgb（230,30,30）；
边界半径：5px；
填充物：5px；
}   
#通知
{   
宽度：150px；
高度：150像素；
边框：1px纯黄色；
背景色：rgb（230,80,30）；
边界半径：5px；
填充物：5px；
}   
#一般的
{   
宽度：150px；
高度：150像素；
边框：1px纯灰；
背景色：rgb（150150150）；
边界半径：5px；
填充物：5px；
}
蓝色
{   
字体大小：粗体；
}   
您可以使用
$（this.attr（“id”）

然后必须将此id传递到php页面以进行删除。正如Ghost所建议的，您可以使用表单或调用。
如果您想要
$.ajax（）
路由，只需调用将处理该过程的PHP即可：

$(".alert").click(function(){           

    var id = $(this).attr('value'); // where the id resides on the markup
    $.ajax({
        url: 'delete_alert.php',
        type: 'POST',
        dataType: 'JSON',
        data: {id : id},
        success: function(response) {
            alert(response.message);

        }
    });

    $(this).fadeOut("fast");
});

然后在PHP中（删除_alert.PHP）：

在这种情况下，为什么不使用表单呢？仅供参考
.val（）
用于表单输入。但如果你真的坚持要通过这些div来实现这一点，你可以使用ajax@Ghost这正是我需要帮助的地方，我不太擅长Ajax，我也不太擅长JQuery。我确实添加了
，但是结果仍然没有变化。然后使用标准形式。为什么要把事情复杂化？只需像以前一样循环条目，并将它们包装在表单标记中。当然，这只是开始，您必须处理表单并使用delete语句。仅使用
并不能删除这些记录谢谢，我想我可以通过PHP（这是我所知道的唯一一个Ajax，因为我一直在进行实时聊天）来删除它。让我再测试一下，我会接受你的回答c：快速问，这是我删除数据的方式，是通过XMLHTTPRequest，这是我的代码
xhttp=newxmlhttprequest（）；xhttp.open（“http://localhost/LID/remove_moderator_alert.php?alert_id=“+alert_id+”，true）；xhttp.send（）（它在一个新函数中）我收到以下错误：
未捕获的语法错误：未能在“XMLHttpRequest”上执行“open”：http://localhost/LID/remove_moderator_alert.php?alert_id=1'不是有效的HTTP方法。
知道如何修复它吗？请检查Ghost的答案。这也是它使用它的方式。谢谢，这非常有效，我以前从未以这种方式使用过Ajax，所以我很高兴我可以尝试一些新的东西。@user3867184很高兴这有帮助
if(isset($_POST['id'])) {
    $message = '';
    $db = new mysqli("localhost", "root", "asdfghjkl", "database");
    $id = $db->real_escape_string($_POST['id']);
    $query = $db->query("DELETE FROM alerts WHERE id = '$id' ");
    if($query->affected_rows > 0) {
        $message = 'delete successful';
    } else {
        $message = 'delete failed';
    }

    echo json_encode(array('message' => $message));
    exit;
}