Question

我不知道它怎么不起作用。此代码来自我的MVC项目。我想使用ajax创建新文件夹（这种情况还可以），也要使用ajax删除文件夹（这种情况不起作用）。请帮助我。

我咨询过：
Delete <tr> using jQuery
delete tr element in jquery

这是我的代码：

<table class="mdc-data-table__table tableFixHead" id="tblFolder" aria-label="Dessert calories">
                        <thead class="text-center">
                            <tr class="mdc-data-table__header-row text-center">
                                <th class="mdc-data-table__header-cell" style="z-index:100; " role="columnheader" scope="col">Edit</th>
                                <th class="mdc-data-table__header-cell" style="z-index:99;" role="columnheader" scope="col">Folder Name</th>
                            </tr>
                        </thead>
                        <tbody class="mdc-data-table__content text-center" id="tblFolder">
                            @foreach (var directoryName in Model.directNamesList)
                            {
                                <tr class="mdc-data-table__row">
                                    <th class="td-actions text-center" style="z-index:2;">
                                        <a href="javascript:void(0);" name="btnDeletefolder" onclick="service.removeRow(this);" id="@directoryName.ID" class="removeLink btn btn-danger btn-link btn-sm" style="padding:5px;">
                                            <i class="material-icons">close</i>
                                            <div class="ripple-container"></div>
                                        </a>
                                    </th>
                                    <td class="mdc-data-table__cell" style="z-index:1">
                                        <label>@directoryName.FolderName</label>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>

这是我的剧本

                    <script>
                        $(document).ready(function () {
                            $("a.removeLink").on("click", function () {
                                var id = $(this).attr('id').valueOf();
                                $.ajax({
                                    url: '/Admin/HRMAdmin/HRMDeleteFolder?ID=' + id,
                                    type: 'GET',
                                    contentType: 'application/json; charset=utf-8',
                                    success: function (data) {
                                        //var trow = $(this).closest("tr");
                                        //trow.remove();

                                        var service = {
                                            removeRow: function (el) {
                                                $(el).closest('tr').remove();
                                            }
                                        }
                                        alert(data);
                                    },
                                    error: function (data) {
                                        alert(data);
                                    }
                                })
                            });
                        })
                    </script>

这是我的脚本，当我添加新文件夹时自动创建行

            <script>
                $(document).ready(function () {
                    $("#btnnewfoldersubmit").on("click", function () {
                        $.ajax({
                            url: '/Admin/HRMAdmin/HRMAddNewFolder?Foldername=' + $("#txtFolderName").val(),
                            type: 'GET',
                            dataType: 'json',
                            contentType: 'application/json; charset=utf-8',
                            success: function (data) {
                                alert("Create Success !!!");
                                var tbl = $("#tblFolder");
                                var folder = $("#txtFolderName").val();
                                tbl.append($('<tr class="mdc-data-table__row"> <th class="td-actions text-center" style="z-index:2;">' +
                                    '<a href="javascript:void(0);" id="' + data + '" name="btnDeletefolder" onclick="service.removeRow(this);" class="removeLink btn btn-danger btn-link btn-sm" style="padding:5px;">' +
                                    '<i class="material-icons">close</i>' +
                                    '<div class="ripple-container"></div>' +
                                    '</a > </th >' + '<td class="mdc-data-table__cell" style="z-index:1"> <label>' + folder + '</label> </td> </tr>'));
                            },
                            error: function (data) {
                                alert(data);
                            }
                        });
                    });

                });
            </script>

Answer 1

您尝试删除code函数中的tr的问题success很少，但是成功的$(this)是指实际的{{1} }功能。

您需要确保单击的success元素是全局removeLink，以便可以在您的variable函数中访问它。像=> success

成功的话，我们将像这样使用它：

var $this = $(this)

此外，您将通过ajax成功在表中动态添加行，因此在这种情况下，您需要使用event Delegation来确保将元素添加到$this.closest("tr").remove()之后DOM。

此外，正如注释中所述，您不需要在HTML中使用called-您也可以删除它。

为此替换您的onclick="service.removeRow(this);"..请求，它应该可以正常运行：

ajax

如何在JQuery中删除<tr>元素

1 个答案: