0

Делаю загрузку изображений. Изображения добавляются. Подскажите пожалуйста как сделать возможность удалять изображения. Спасибо Почему-то я не могу удалить изображения таким образом

const cartBlockInputFile = document.querySelectorAll('.photo-checkout__input-file');
if (cartBlockInputFile) {
    cartBlockInputFile.forEach(el => {
        el.addEventListener('change', (event) => {
            var file = event.target.files; // FileList object
            for (var i = 0, f; f = file[i]; i++) {
                // Only process image files.
                if (!f.type.match('image.*')) {
                    alert("Image only please....");
                }
                var reader = new FileReader();
                const inputImg = document.querySelectorAll('.photo-checkout__input-file-img');
                var span = document.createElement('span');
                const inputRemove = document.querySelectorAll('.photo-checkout__input-file-remove span');
                // Closure to capture the file information.
                reader.onload = (function (theFile) {
                    return function cartBlockFileMask(e) {
                        // Render thumbnail.
                        span.className = 'preview'
                        span.innerHTML = [
                            '<div class="photo-checkout__input-file-remove _icon-close">Удалить</div>' +
                            '<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'
                        ].join('');

                        inputImg.forEach(img => {
                            img.classList.add("_active")
                            img.insertBefore(span, null);
                        });
                    };



                })(f);

                if (inputRemove) {
                    inputRemove.forEach(btn => {
                        btn.addEventListener('click', () => {
                            const item = btn.closest('.preview');
                            item.remove();
                            event.value = ''; // ключевая строка
                        });
                    });
                }

                reader.readAsDataURL(f);
            };
        });

    });
};
.photo-checkout__block {
  position: relative;
  cursor: pointer;
  display: flex;
  width: 100%;
}
.photo-checkout__input-file-img {
  display: flex;
  width: 0;
  height: 0;
  border-radius: 5px;
}

.photo-checkout__input-file-img._active {
  width: 100%;
  height: 120px;
}

.photo-checkout__input-file-img span {
  position: relative;
  width: 165px;
  height: 120px;
  margin: 0px 20px 0px 0px;
}

.photo-checkout__input-file-img span:hover .photo-checkout__input-file-remove {
  opacity: 1;
  pointer-events: auto;
}

.photo-checkout__input-file-img span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.photo-checkout__input-file span {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.photo-checkout__input-file input {
  cursor: pointer;
  min-width: 165px;
  height: 120px;
  opacity: 0;
  position: absolute;
  border-radius: 5px;
}
.photo-checkout__input-file label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: 165px;
  height: 120px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.3s ease 0s;
  color: #000000;
}
.photo-checkout__input-file label::before {
  content: "+";
  font-size: 18px;
  width: 15px;
  height: 15px;
  margin: 0px 0px 10px 0px;
  color: #000000;
}
.photo-checkout__input-file-remove {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  border-radius: 5px;
  background: linear-gradient(
    0deg,
    rgba(54, 108, 217, 0.8),
    rgba(54, 108, 217, 0.8)
  );
  font-weight: 500;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease 0s;
  pointer-events: none;
}
<div class="photo-checkout__block">
  <div class="photo-checkout__input-file">
    <input type="file" id="file" name="file" class="file">
    <label>Фотография<br> товара</label>
                                                            <div class="photo-checkout__input-file-img"></div>
  </div 
</div>

1 ответ 1

0

Попробуйте передать в колбэк объект события, отследить с помощью него по какому элементу был клик, и удалить его со страницы.

if (inputRemove) {
    inputRemove.forEach(btn => {
        btn.addEventListener('click', (e) => {
            const target = e.target;
            if (taget && target.classList.contains('preview')){
                target.remove();
           }
        });
    });
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.