Laravel Ajax delete each element from array-CodePudding

I'm trying to delete each element from array that are displayed via Append and as images.

Blade:

<h4>Menu Images</h4>
<div  id="cardImages"></div>

Ajax function

$(document).on('click', '.edit', function(){
  $("#cardImages").empty();
  var id = $(this).attr("id");
  $('#form_output').html('');
  $.ajax({
      url: "{{route('restaurantOffers.fetchdata')}}",
      method: 'get',
      data: {id:id},
      dataType: 'json',
      success:function(data)
      {
          $('#contract_id').val(id);                
          $('#editContract').modal('show');
          $('#action').val('Speichern');
          $('.modal-title').text('Daten aktualisieren');
          $('#button_action').val('update');

          var cardUp = data.cardUpload;

          $.each(cardUp, function(index,value) {
            $('#cardImages').append('<a href="{{ url('/storage/offerPic/')}}' '/'   value  '" download ><img src="{{ url('/storage/offerPic/')}}' '/'   value  '" alt=""></a><a  target="_blank" rel="nofollow noreferrer" href="" method="post">X</a>');

        });

      }
  })
});

Controller:

function fetchdata(Request $request)
{
    $id = $request->input('id');
    $data = RestaurantOffer::find($id);
    $output = array(            
        'cardUpload'    =>  json_decode($data->cardUpload),            
    );
    echo json_encode($output);
}

cardUpload column records are stored as array, ex. (["image1.png","image2.png"]).

The images are displaying well at cardImages div, but I want to make a function that delete each of these images.

The question is how to delete each of array element one by one.

PS: Those images are displaying after edit button. So, I have to create delete or post method inside of get method.

Thank you in advance

CodePudding user response：

to delete specific image you should determine a specific id for each image:

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

function delete(Request $request)
{
    $id = $request->input('id');
    $imagesIdToDelete=$request->input('imagesIdToDelete') ;
    $data = RestaurantOffer::find($id);
    $images=json_decode($data->cardUpload,true) ;
    foreach($images as $k=>$image )
    {
       if(in_array($k,$imagesIdToDelete) )
         {
          unset($images[$k]) ;
          }
    }

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

CodePudding user response：

to delete specific image you should determine a specific id for each 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)
                     ]) ;
    
}

the delete button:

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

    <button  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',
})

please do not suggest edit , if you suggest I can not edit it and have to post another answer.