Ajax remove item nach reload

Question

Also habe ich ein kleines Ajax-Skript erstellt, das Elemente aus meiner Datenbank entfernt und anzeigt, leider ändert sich die Ansicht nur nach einem Neuladen (Element wird entfernt).

Ich könnte eine window.location.reload() in meiner Erfolgsfunktion machen, aber ich möchte nicht die ganze Seite neu laden.

Wie gehe ich damit um, damit ich nicht die ganze Seite neu laden muss und das Element in der Ansicht entfernt wird.

<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

Angenommen, Sie eine Liste der Elemente haben (aus der Datenbank geladen werden) und Sie einen Ajax-Aufruf ausführen, einige dieser Elemente aus der Datenbank zu löschen. Sie können die gelöschten Objekte Ide in der Ajax-Rückruf zurückkehren und aus dem UI löschen:

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(); 
     } 
     } 
    } 
}); 

Sie etwas ähnliches mit einem Tisch machen kann oder eine andere UI-Element