javascript - 重新加载后 Ajax 删除元素

Question

所以我创建了一个小的 Ajax 脚本，它从我的数据库和 View 中删除元素，不幸的是， View 只会在重新加载后发生变化(元素被删除)。

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

我该如何处理这个问题，这样我就不必重新加载整个页面，元素就会从 View 中删除。

<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 回调中，并从 UI 中删除它们:

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 元素执行类似的操作