Ajax重新加载后删除项目

Question

因此，我创建了一个小的Ajax脚本，该脚本从数据库和视图中删除了项目，不幸的是，视图仅在重新加载后才发生更改（项目被删除）。

我可以在我的成功函数中执行window.location.reload（），但是我不想重新加载整个页面。

我该如何处理，这样我就不必重新加载整个页面并且该项目会在视图中删除。

<script>
    $(document).ready(function() {
      $(".destroy-device").click(function(e) {
        e.preventDefault();
        var id = $(this).attr("data-id");
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        });
        $.ajax({
            url: 'destroy/'+id,
            type: 'post',
            data: {_method: 'delete',
                    id: id},
            success:function(data) {
                console.log('success');
            }
        });
      })
    });
</script>

的HTML：

<form method="post">
    <input type="hidden" name="_method" value="delete">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="hidden" name="id" value="{{ $deviceValue->id }}">
    <button type="button" class="btn btn-danger destroy-device" data-id="{{ $deviceValue->id }}" name="destroy_device">
        <span class="glyphicon glyphicon-trash"></span>
    </button>
</form>

Answer 1

假设您有一个项目列表（从数据库中加载），并且执行了ajax调用以从数据库中删除其中一些项目。 您可以将已删除项目的ID返回到ajax回调中，然后从用户界面中将其删除：

的HTML

<ul id="myList">
   <li data-item="1">Item one</li>
   <li data-item="2">Item two</li>
   <li data-item="3">Item three</li>
</ul>

jQuery的

$.ajax({
   ...
   success: function(data) {
      // data --> Array of deleted items (data-item)
      if (data) {
         var list = $('#myList');
         for(var i=0;i<data.length;i++) {
            list.children('li[data-item="' + data[i] + '"]').remove();
         }
      }
   }
});

您可以对表或其他UI元素执行类似的操作