如何在从其端点删除行后删除该行

tyg4sfes  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(400)

删除某些事件时,如何更新表?操作是从db中删除事件,但行在那里。使用deletethis函数后如何删除该行。

<div id="profile-dashboard-content-events">
        <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Title</td>
                    <td>Delete</td>
                </tr>
            </thead>
            <tbody>
                @foreach (var theEvent in Model.EventsList)
                {
                    <tr>
                        <td>@theEvent.Id</td>
                        <td>@theEvent.ShortTitle</td>
                        <td>
                            <a onclick="DeleteThis(@theEvent.Id)"><i class="fas fa-trash-alt iicon cursor-pointer"></i></a>
                        </td>
                    </tr>

                }

            </tbody>
        </table>
        <small style="color:#e0e0e0;">*Clear the last @_config["NumberOfEvents"], will delete the oldest @_config["NumberOfEvents"] events </small>
        <br />
        <small style="color:#e0e0e0;">*Delete past events, will delete all expired events </small>
    </div>

    <script>
        function DeleteThis(theEventId) {
            var baseUrl = "https://localhost:44380/Event/Delete";
            var requestUrl = baseUrl + "?eventId=" + theEventId;
            var data = {
                eventId: theEventId
            };
            axios.delete(requestUrl, data)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {

            })
    }
    </script>
0pizxfdo

0pizxfdo1#

您可以使用纯javascript实现这一点。在你的 onclick 传入 this ,它是对已单击的元素的引用。例如: <a onclick="DeleteThis(@theEvent.Id, this)"> 在你的 DeleteThis 方法添加一个参数,然后调用 parentElement 向上遍历dom树以查找表行。然后使用删除表行 remove() . 例如:

function DeleteThis(theEventId, ctrl) {             
  ctrl.parentElement.parentElement.remove()
}

下面是一个基本示例(没有任何asp.net)https://jsfiddle.net/6ylja3v0/

相关问题