Tajuk yang ditulis semula ialah: Alih keluar elemen satu demi satu daripada tatasusunan menggunakan Laravel Ajax

Question

Saya cuba mengalih keluar setiap elemen daripada tatasusunan yang dipaparkan sebagai imej melalui Append.

Bilah:

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

Fungsi Ajax

$(document).on('click', '.edit', function(){
  $("#cardImages").kosong();
  var id = $(this).attr("id");
  $('#form_output').html('');
  $.ajax({
      url: "{{route('restaurantOffers.fetchdata')}}",
      kaedah: 'dapat',
      data: {id:id},
      dataType: 'json',
      kejayaan:fungsi(data)
      {
          $('#contract_id').val(id);
          $('#editContract').modal('show');
          $('#action').val('Speichern');
          $('.modal-title').text('kemas kini data');
          $('#button_action').val('kemas kini');

          var cardUp = data.cardUpload;

          $.each(cardUp, function(index,value) {
            $('#cardImages').append('<a href="{{ url('/storage/offerPic/')}}'+'/' + value +'" muat turun ><img src ="{{ url('/storage/offerPic/')}}'+'/' + value +'" alt=""></a><a class="btn btn -bahaya"target="_blank" rel="nofollow noreferrer" href=""

        });

      }
  })
});

Pengawal:

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

rekod lajur cardUpload disimpan sebagai tatasusunan, contohnya (["image1.png","image2.png"]).

Imej dipaparkan dengan baik dalam div cardImages, tetapi saya mahu mencipta fungsi untuk mengalih keluar imej ini satu demi satu.

Persoalannya ialah bagaimana untuk memadamkan elemen tatasusunan satu demi satu.

PS: Imej ini dipaparkan selepas butang edit. Jadi saya perlu mencipta kaedah padam atau terbitkan di dalam kaedah dapatkan.

Terima kasih terlebih dahulu atas bantuan anda

Answer 1

Untuk memadamkan imej tertentu, anda harus mengenal pasti id khusus untuk setiap imej:

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

Butang padam:

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

Tolong jangan cadangkan suntingan, jika anda cadangkan saya tidak boleh mengeditnya dan perlu hantar jawapan lain.