Table 在 table 编辑 js 中删除行后未删除行

Question

我试图在删除数据库数据后删除 table 行。而且，我正在使用 tableedit.js。我编写了以下代码来删除已删除的行，但是它似乎不起作用：

$('.tabledit-confirm-button').click(function () {

                if(confirm("Are you sure, you want to delete this category?"))
                {
                    var data = $(this).closest('tr').find('input[type=hidden]').val();

                    var url = '{{ route("category.destroy", ":data") }}';

                    url = url.replace(':data', data);

                    $.ajax({
                        method: "POST",
                        url: url,
                        dataType: 'json',
                        data: { _token:"{{ csrf_token() }}", _method:"DELETE"},
                        success(response){

                            success(response.data);

                            $('.tabledit-deleted-row').remove();

                        },
                        error: function(response){
                            let data = response.responseJSON.errors;

                            $.each( data, function( key, value ) {
                                $( "<span class='validation-errors text-danger'>"+value+"</span>" ).insertAfter( "#"+key );
                            });
                        }
                    });
                }

            });

当我点击table编辑的确认按钮时，添加了class tabledit-deleted-row。从数据库中删除数据后，如何删除 table 行？

以下是我在 html 中的代码：

<table class="table table-striped table-bordered" id="example-1">
<thead>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Is Parent</th>
        <th>Parent</th>
        <th class="tabledit-toolbar-column">Action </th>
    </tr>
</thead>
<tbody id="check">
    <tr>
        <th scope="row">1</th>
        <input type="hidden" value="6">
        <td class="tabledit-view-mode"><span class="tabledit-span">Colleen Soto

                                                        </span>
            <input class="tabledit-input form-control input-sm" type="text" name="name" value="Colleen Soto

                                                        " style="display: none;" disabled="">
        </td>
        <td class="tabledit-view-mode"><span class="tabledit-span">Yes 

                                                        </span>
            <input class="tabledit-input form-control input-sm" type="text" name="is_parent" value="Yes 

                                                        " style="display: none;" disabled="">
        </td>
        <td class="tabledit-view-mode"><span class="tabledit-span" style="">Colleen Soto</span>
            <select class="tabledit-input form-control input-sm" name="Nickname" style="display: none;" disabled="">
                <option value="6">Colleen Soto</option>
                <option value="9">Colleen Sotomjbj</option>
            </select>
        </td>
        <td style="white-space: nowrap; width: 1%;">
            <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
                <div class="btn-group btn-group-sm" style="float: none;">
                    <button type="button" class="tabledit-edit-button btn btn-primary waves-effect waves-light" style="float: none;margin: 5px;"><span class="icofont icofont-ui-edit"></span></button>
                    <button type="button" class="tabledit-delete-button btn btn-danger waves-effect waves-light" style="float: none;margin: 5px;"><span class="icofont icofont-ui-delete"></span></button>
                </div>
                <button type="button" class="tabledit-save-button btn btn-sm btn-success" style="display: none; float: none;">Save</button>
                <button type="button" class="tabledit-confirm-button btn btn-sm btn-danger" style="display: none; float: none;">Confirm</button>
                <button type="button" class="tabledit-restore-button btn btn-sm btn-warning" style="display: none; float: none;">Restore</button>
            </div>
        </td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <input type="hidden" value="8">
        <td class="tabledit-view-mode"><span class="tabledit-span">Canosoft

                                                        </span>
            <input class="tabledit-input form-control input-sm" type="text" name="name" value="Canosoft

                                                        " style="display: none;" disabled="">
        </td>
        <td class="tabledit-view-mode"><span class="tabledit-span"> No 

                                                        </span>
            <input class="tabledit-input form-control input-sm" type="text" name="is_parent" value=" No 

                                                        " style="display: none;" disabled="">
        </td>
        <td class="tabledit-view-mode"><span class="tabledit-span" style="">Canosoft</span>
            <select class="tabledit-input form-control input-sm" name="Nickname" style="display: none;" disabled="">
                <option value="6">Colleen Soto</option>
                <option value="9">Colleen Sotomjbj</option>
            </select>
        </td>
        <td style="white-space: nowrap; width: 1%;">
            <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
                <div class="btn-group btn-group-sm" style="float: none;">
                    <button type="button" class="tabledit-edit-button btn btn-primary waves-effect waves-light" style="float: none;margin: 5px;"><span class="icofont icofont-ui-edit"></span></button>
                    <button type="button" class="tabledit-delete-button btn btn-danger waves-effect waves-light" style="float: none;margin: 5px;"><span class="icofont icofont-ui-delete"></span></button>
                </div>
                <button type="button" class="tabledit-save-button btn btn-sm btn-success" style="display: none; float: none;">Save</button>
                <button type="button" class="tabledit-confirm-button btn btn-sm btn-danger" style="display: none; float: none;">Confirm</button>
                <button type="button" class="tabledit-restore-button btn btn-sm btn-warning" style="display: none; float: none;">Restore</button>
            </div>
        </td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <input type="hidden" value="9">
        <td class="tabledit-view-mode"><span class="tabledit-span">Colleen Sotomjbj

                                                        </span>
            <input class="tabledit-input form-control input-sm" type="text" name="name" value="Colleen Sotomjbj

                                                        " style="display: none;" disabled="">
        </td>
        <td class="tabledit-view-mode"><span class="tabledit-span">Yes 

                                                        </span>
            <input class="tabledit-input form-control input-sm" type="text" name="is_parent" value="Yes 

                                                        " style="display: none;" disabled="">
        </td>
        <td class="tabledit-view-mode"><span class="tabledit-span" style="">Colleen Sotomjbj</span>
            <select class="tabledit-input form-control input-sm" name="Nickname" style="display: none;" disabled="">
                <option value="6">Colleen Soto</option>
                <option value="9">Colleen Sotomjbj</option>
            </select>
        </td>
        <td style="white-space: nowrap; width: 1%;">
            <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
                <div class="btn-group btn-group-sm" style="float: none;">
                    <button type="button" class="tabledit-edit-button btn btn-primary waves-effect waves-light" style="float: none;margin: 5px;"><span class="icofont icofont-ui-edit"></span></button>
                    <button type="button" class="tabledit-delete-button btn btn-danger waves-effect waves-light" style="float: none;margin: 5px;"><span class="icofont icofont-ui-delete"></span></button>
                </div>
                <button type="button" class="tabledit-save-button btn btn-sm btn-success" style="display: none; float: none;">Save</button>
                <button type="button" class="tabledit-confirm-button btn btn-sm btn-danger" style="display: none; float: none;">Confirm</button>
                <button type="button" class="tabledit-restore-button btn btn-sm btn-warning" style="display: none; float: none;">Restore</button>
            </div>
        </td>
    </tr>
</tbody>

Answer 1

你可以试试这个

将 jquery this 对象保存到 var，然后使用该搜索删除 tr。您的最终代码将类似于下面的代码

$('.tabledit-confirm-button').click(function () {
    if(confirm("Are you sure, you want to delete this category?")) {
        var data = $(this).closest('tr').find('input[type=hidden]').val();
        var $this = $(this);

        var url = '{{ route("category.destroy", ":data") }}';

        url = url.replace(':data', data);

        $.ajax({
            method: "POST",
            url: url,
            dataType: 'json',
            data: { _token:"{{ csrf_token() }}", _method:"DELETE"},
            success(response){

                success(response.data);

                $this.parent("tr").remove()

            },
            error: function(response){
                let data = response.responseJSON.errors;

                $.each( data, function( key, value ) {
                    $( "<span class='validation-errors text-danger'>"+value+"</span>" ).insertAfter( "#"+key );
                });
            }
        });
    }

});

Table 在 table 编辑 js 中删除行后未删除行

Table row not being deleted after deleting the row in table edit js

jquery

ajax

edit-tableview