<p>我正在尝试从通过Append显示为图像的数组中删除每个元素。</p> <p><strong>刀片：</strong></p> <pre class="brush:php;toolbar:false;"><h4>菜单图片</h4> <div class="col-md-12" id="cardImages"></div></pre> <p><strong><code>Ajax函数</code></strong></p> <pre class="brush:php;toolbar:false;">$(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('数据更新'); $('#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" href="" method="post">X</a>'); }); } }) });</pre> <p><strong>控制器：</strong></p> <pre class="brush:php;toolbar:false;">function fetchdata(Request $request) { $id = $request->input('id'); $data = RestaurantOffer::find($id); $output = array( 'cardUpload' => json_decode($data->cardUpload), ); echo json_encode($output); }</pre> <p>cardUpload列记录存储为数组，例如（<code>["image1.png","image2.png"]</code>）。</p> <p>这些图像在cardImages div中显示得很好，但我想创建一个函数来逐个删除这些图像。</p> <p>问题是如何逐个删除数组元素。</p> <p>PS：这些图像在编辑按钮之后显示。因此，我必须在get方法中创建删除或发布方法。</p> <p>提前感谢您的帮助</p>

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