Der umgeschriebene Titel lautet: Mit Laravel Ajax Elemente einzeln aus einem Array entfernen

Question

Ich versuche, jedes Element aus einem Array zu entfernen, das über Anhängen als Bild angezeigt wird.

Klinge:

<h4>Menübild</h4>
<div class="col-md-12" id="cardImages"></div>

Ajax-Funktion

$(document).on('click', '.edit', function(){
  $("#cardImages").empty();
  var id = $(this).attr("id");
  $('#form_output').html('');
  $.ajax({
      URL: "{{route('restaurantOffers.fetchdata')}}",
      Methode: 'get',
      Daten: {id:id},
      Datentyp: 'json',
      Erfolg:Funktion(Daten)
      {
          $('#contract_id').val(id);
          $('#editContract').modal('show');
          $('#action').val('Speichern');
          $('.modal-title').text('data update');
          $('#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 class="btn btn -danger" target="_blank" rel="nofollow noreferrer"

        });

      }
  })
});

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-Spaltendatensätze werden beispielsweise als Arrays gespeichert (["image1.png","image2.png"]).

Die Bilder werden im Div „cardImages“ einwandfrei angezeigt, aber ich möchte eine Funktion erstellen, um diese Bilder einzeln zu entfernen.

Die Frage ist, wie man Array-Elemente einzeln löscht.

PS: Diese Bilder werden nach dem Bearbeiten-Button angezeigt. Also muss ich eine Lösch- oder Veröffentlichungsmethode innerhalb der Get-Methode erstellen.

Vielen Dank im Voraus für Ihre Hilfe

Answer 1

要删除特定的图像，您应该为每个图像确定一个特定的id：

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

删除按钮：

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

请不要建议编辑，如果您建议我无法编辑它，必须发布另一个答案。