在JavaScript for循环中遍历每个消息

当我点击"未读"然后消息将从我的消息列表中消失。除此之外，我还想在for循环中遍历每条消息，这样每次单击Unread时它们都会被删除。我试图做一个JavaScript删除函数请见下面，我将如何通过每个消息迭代?

<div class="tab-pane fade" id="settings-pills">
@{
if (Model.Messages.Count > 0)
{
var messageCounter = 0;
foreach (var message in Model.Messages)
{
messageCounter++;
if (messageCounter <= 5)
{
<div class="alert alert-default alert-dismissible" role="alert" style="background: rgb(233, 233, 233);">
<button class="close" aria-label="Close" type="button" data-dismiss="alert"><span aria-hidden="true">×</span></button>

未读

<p class="small"><i class="fa fa-envelope" aria-hidden="true"></i> Unread</p></div>
<p class="small"><i class="fa fa-calendar" aria-hidden="true"></i> @message.CreatedOn.ToString("dd MMM yyyy")</p>
<p class="small" style="font-weight: bold;"><i class="fa fa-info" aria-hidden="true"></i> Claim ref. @message.CaseNumber</p>
<p>@message.Message <a href="@Url.Action("Details","Enquiry" , new { id = @message.EnquityId })">More.</a></p>
</div>
}
else
{
<div class="alert alert-default alert-dismissible  message-More" role="alert" style="display:none;background: rgb(233, 233, 233);">
<button class="close" aria-label="Close" type="button" data-dismiss="alert"><span aria-hidden="true">×</span></button>
<p class="small"><i class="fa fa-calendar" aria-hidden="true"></i> @message.CreatedOn.ToString("dd MMM yyyy")</p>
<p class="small" style="font-weight: bold;"><i class="fa fa-info" aria-hidden="true"></i> Claim ref. @message.CaseNumber</p>
<p>@message.Message <a href="@Url.Action("Details","Enquiry", new { id = @message.EnquityId })">More.</a></p>
</div>

JavaScript，我认为需要遍历每条消息

    $(".unreadmessage").click(function () {
        var messageId=$(this).data("id");
        $(this).remove();
});

$(".alert-dismissible").each(function(){
       $(this).remove();
}

$(".UnreadMessage").click(function() {
    $(this).remove();
});