Le titre réécrit est : Supprimez les éléments un par un d'un tableau à l'aide de Laravel Ajax

Question

J'essaie de supprimer chaque élément d'un tableau affiché sous forme d'image via Append.

Lame :

<h4>Image du menu</h4>
<div class="col-md-12" id="cardImages"></div>

Fonction Ajax

$(document).on('click', '.edit', function(){
  $("#cardImages").empty();
  var id = $(this).attr("id");
  $('#form_output').html('');
  $.ajax({
      URL : "{{route('restaurantOffers.fetchdata')}}",
      méthode : 'obtenir',
      données : {id:id},
      Type de données : 'json',
      succès: fonction (données)
      {
          $('#contract_id').val(id);
          $('#editContract').modal('show');
          $('#action').val('Speichern');
          $('.modal-title').text('mise à jour des données');
          $('#button_action').val('update');

          var cardUp = data.cardUpload;

          $.each(cardUp, fonction(index,valeur) {
            $('#cardImages').append('X');

        });

      }
  })
});
Contrôleur : 
fonction fetchdata(Request $request)
{
    $id = $request->input('id');
    $data = RestaurantOffer::find($id);
    $sortie = tableau(
        'cardUpload' => json_decode($data->cardUpload),
    );
    echo json_encode($output);
}
Les enregistrements de colonne 
cardUpload sont stockés sous forme de tableaux, par exemple (["image1.png","image2.png"]). 
Les images s'affichent correctement dans le div cardImages, mais je souhaite créer une fonction pour supprimer ces images une par une. 
La question est de savoir comment supprimer les éléments du tableau un par un. 
PS : ces images sont affichées après le bouton d'édition. Je dois donc créer une méthode de suppression ou de publication dans la méthode get. 
Merci d'avance pour votre aide

Answer 1

Pour supprimer des images spécifiques, vous devez identifier un identifiant spécifique pour chaque image :

([1=>"image1.png",2=>"image2.png"]).

function delete(Request $request)
{
    $id = $request->input('id');
    $imageIdToDelete=$request->input('image_index') ;
    $data = RestaurantOffer::find($id);
    $images=json_decode($data->cardUpload,true) ;
    if(isset($images[$imageIdToDelete])){
    unset($images[$imageIdToDelete]) ;
    }
    

    $data->update([
       'cardUpload'=>json_encode($images)
                     ]) ;
    
}

Bouton Supprimer :

$.each(cardUp, function(index,value) {
     $('#cardImages').append('<a href="{{ url('/storage/offerPic/')}}'+'/' + value +'" download >
<img src="{{ url('/storage/offerPic/')}}'+'/' + value +'" alt=""></a>

    <button class="btn btn-danger delete" data-index=index  >delete</button>');

        });


$('delete').on('click',function(){
var image_index= $(this).attr('data-index')
})

$.ajax({
   url: "{{route('restaurantOffers.delete')}}",
   method: 'get',
   data: {image_index:image_index},
   dataType: 'json',
})

Veuillez ne pas suggérer de modifications, si vous suggérez que je ne peux pas le modifier et que je dois publier une autre réponse.