从端点删除后如何删除行答案

【问题标题】：How to remove row after being deleted from its endpoint从端点删除后如何删除行
【发布时间】：2021-09-20 09:41:34
【问题描述】：

删除某些事件后如何更新表格？该操作是从数据库中删除事件，但是，该行在那里。使用 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>

【问题讨论】：

标签： javascript asp.net asp.net-mvc asp.net-core

【解决方案1】：

您可以使用纯 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/

【讨论】：