Jquery ile File İnput'dan Resim Silmek

Alttaki kod ile yapmaya çalıştığım tam olarak şu.
File'den gelen resimleri ekrana bastırmak ve altlarına bir sil butonu ekliyorum.
Buna basınca resim formdan tamamen kaldırmak ve post ettiğim zaman (form u aynı sayfaya php ile post ediyorum ajax kullanmıyorum.) o resim gitmesin php ye.
Yani 4 resim seçtim 1 ini sildim PHP ye 3 resim gitsin.

Yapabildiğim kısım resimleri listelemek o kadar
Sil butonu mevcut ama file inputtan silemiyorum.

    $(document).ready(function(){

      $('.file').on('change', function(){
        const files = this.files;
        const resimlerKutu = $('.resimler');
        for ( var i=0; i<files.length; i++){
          let file = files[i];
          let name = file['name'];
          let size = file['size'];
          type = file['type'];

          let oku = new FileReader();
          oku.readAsDataURL(file);
          let reader = new FileReader();
          reader.onload = (function(file) {
            return function(e) {
              let kutu = $('<div></div>');
              let resim = $('<img>');
              let silBtn = $('<button type="button" class="sil">Sil</button>')

              resim.attr('src', e.target.result);
              kutu.append(resim);
              kutu.append(silBtn);
              resimlerKutu.append(kutu);

              silBtn.on('click', function() {
                kutu.remove();
              });

            };

          })(file);
          reader.readAsDataURL(file);

        }


      });

    });

function removeFile(index){
var attachments = document.getElementById("attachment").files; // <-- reference your file input here
var fileBuffer = new DataTransfer();

// append the file list to an array iteratively
for (let i = 0; i < attachments.length; i++) {
// Exclude file in specified index
if (index !== i)
fileBuffer.items.add(attachments[i]);
}

// Assign buffer to file input
document.getElementById("attachment").files = fileBuffer.files; // <-- according to your file input reference
}

Hiçbir şey anlamadım hocam?

Altına açıklamasını yazmamışım hocam kusura bakma. Bu kodu script tahı arasına koy ve döngüdeki sil butonuna 1 ddn başlayan numaralar ver. Daha sonra butona basınca bu fonksiyonu tetikle ve fonksiyondaki index değeri ise senin verdiğin numara-1 şeklinde yapacaksın

alttaki gibi yaptım hocam yanlış anlamadıysam ama yine sonuç alamadım.

 
    $(document).ready(function(){

      $('.file').on('change', function(){
        const files = this.files;
        const resimlerKutu = $('.resimler');
        for ( var i=0; i<files.length; i++){
          let file = files[i];
          let name = file['name'];
          let size = file['size'];
          type = file['type'];


          let oku = new FileReader();
          oku.readAsDataURL(file);

          oku.onload = (function(file) {
            return function(e) {
              let kutu = $('<div></div>');
              let resim = $('<img>');
              let silBtn = $('<button type="button" class="sil" data-id="'+i+'">Sil</button>')

              resim.attr('src', e.target.result);
              kutu.append(resim);
              kutu.append(silBtn);
              resimlerKutu.append(kutu);

              silBtn.on('click', function() {
                kutu.remove();
                removeFile($(this).data('id'));
              });

            };

          })(file);

        }


      });

    });


    function removeFile(index){
      var attachments = document.getElementById("file").files; 
      var fileBuffer = new DataTransfer();
      for (let i = 0; i < attachments.length; i++) {
        if (index !== i)
          fileBuffer.items.add(attachments[i]);
      }
      document.getElementById("file").files = fileBuffer.files;
    }

Yok hocam bu değil, ben sabah pc geçince kodu düzenleyip atayım sizd

şimdiden teşekkürler hocam hayırlı geceler.

ücretli destek sağlayabilirim

Bakma şansınız oldu mu hocam acaba?