JS. Как реализовать поочерёдную загрузку изображений и их предпросмотр, и возможность удаления по кнопке?

Для реализации поочередной загрузки изображений и их предпросмотра с возможностью удаления по кнопке в JavaScript, можно использовать следующий подход:

1. Создайте HTML разметку, содержащую элементы для загрузки изображений, их предпросмотра и кнопки удаления:

<input type="file" id="fileInput" accept="image/*" multiple>
<div id="imagePreview"></div>

2. Напишите JavaScript код, который будет обрабатывать загрузку изображений, их предпросмотр и удаление:

const fileInput = document.getElementById('fileInput');
const imagePreview = document.getElementById('imagePreview');

fileInput.addEventListener('change', function() {
  const files = this.files;

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();

    reader.onload = function(e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      
      const deleteButton = document.createElement('button');
      deleteButton.textContent = 'Delete';
      deleteButton.addEventListener('click', function() {
        imagePreview.removeChild(img);
        imagePreview.removeChild(deleteButton);
      });

      imagePreview.appendChild(img);
      imagePreview.appendChild(deleteButton);
    };

    reader.readAsDataURL(file);
  }
});

3. В данном коде обработчик события change на input[type=file] отслеживает выбор пользователем файлов. При выборе изображений происходит перебор их, создание HTML-элементов img для предпросмотра и кнопки удаления для каждого изображения. После этого изображение и кнопка добавляются в контейнер imagePreview.

4. При клике на кнопку удаления соответствующее изображение и кнопка удаляются из контейнера.

Таким образом, при выборе изображений через элемент input[type=file] пользователь сможет видеть их предпросмотр, а затем удалить необходимые изображения по кнопке.