Javascript 如何通过单击文本提交从循环生成的多个表单之一

查询返回一个通知数组，该数组在前端循环。对于数组中的每个项目，我有两个选项：

标记为read

，

删除

，每个选项都是文本。目标是通过单击文本触发表单提交

正在循环的前端代码是一个带有下拉菜单的按钮，其中包含选项。我希望能够点击文本提交表格。我所学的JavaScript很棘手。我有两种方法获得点击响应，但我被卡住了，因为我不知道如何提交表单

<button class="btn btn-light btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <form action="/notifications/{{ $notification->id }}/edit" method="POST" name="updateNotificationForm" class="update-notification-form">
        @csrf
        {{-- @method('PUT') --}}
        <input type="hidden" name="id" value="{{ $notification->id }}">
        <p class="update-notification pl10">Mark read</p>
    </form>
    <form action="/notifications/delete/{{ $notification->id }}" method="POST" class="delete-notification-form">
        @csrf
        <input type="hidden" name="id" value="{{ $notification->id }}">
        <p class="delete-notification pl10">Delete</p>
    </form>
</div>

方法二：

document.querySelectorAll('.update-notification').forEach(item => {
    item.addEventListener('click', event => {
        console.log("Mark read clicked");

        // submit form
        
    });
});

console.log

显示每个方法都链接到数组中的每个元素，但我不知道如何提交表单

<button class="btn btn-light btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <form action="/notifications/{{ $notification->id }}/edit" method="POST" name="updateNotificationForm" class="update-notification-form">
        @csrf
        {{-- @method('PUT') --}}
        <input type="hidden" name="id" value="{{ $notification->id }}">
        <p class="update-notification pl10">Mark read</p>
    </form>
    <form action="/notifications/delete/{{ $notification->id }}" method="POST" class="delete-notification-form">
        @csrf
        <input type="hidden" name="id" value="{{ $notification->id }}">
        <p class="delete-notification pl10">Delete</p>
    </form>
</div>

---

谢谢你的帮助

解决方案是简单地将目标自身的parentNode作为目标并触发提交

document.querySelectorAll('.update-notification').forEach(item => {
    item.addEventListener('click', event => {
        console.log("Mark read clicked");
         event.target.parentNode.submit();
    });
});

---

好极了！非常感谢！您的解决方案适用于这两种方法！杰出的