Почему не удаляется фотография при нажатии на неё?

Question

flstamn @flstamn

JavaScript

Почему не удаляется фотография при нажатии на неё?

Написан код для добавления картинки и ее удаления при нажатии на нее,из массива array_for_flask она удаляется,а со страницы нет.

JS

const buttonSelect = document.querySelector('.upload-files');
const fileInput = document.querySelector('.file-input');
buttonSelect.addEventListener('click', ()=>{
  fileInput.click()
  $('.img-container').css('display', 'flex')
});
fileInput.addEventListener('change', (event)=>{
  event.preventDefault();
  array_for_flask.push(...fileInput.files);
  ShowFiles();
});
function del(name) {
  const name_img = name.getAttribute('name');
  const index = array_for_flask.findIndex(element => element.name === name_img);
  $(`#${name_img}`).outerHTML = "";
  array_for_flask.splice(index, 1);
  console.log(array_for_flask)
};
function ShowFiles(){
  const UploadDiv = document.querySelector('.img-container');
  UploadDiv.innerHTML = array_for_flask.map(images =>{
    const fileReader = new FileReader();
    const id = `F-${Math.random().toString(32).substring(7)}`;
    fileReader.readAsDataURL(images);
    fileReader.onload = ()=>{
      const url = fileReader.result;
      const name_img = images.name;
      const img = `   
          <img id = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'>
      `;
      UploadDiv.innerHTML +=img;
    };
  }).join('');
};

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="static/css/style.css">
    </head>
    <body>
        <div class = 'logo' id = 'navbar'>
            <h1>Ayesha</h1>
        </div>
        <section class="instruction">
            <div class="text-block">
                <h1>Admin</h1>
            </div>
            <div class="pic-block">
            </div>
        </section>
        <div class ='card'>
            <div class="text-in-card">
                <h1>New Coth</h1>
            </div>
            <div class="name-cloth">
                <ion-icon id = 'name-error' name="alert-circle-outline" class = 'error'></ion-icon>
                <input id = 'name' type="text" value="" class="some-input" placeholder="name">
                <ion-icon name="shirt-outline" class = 'icons-inp'></ion-icon>
            </div>
            <div class="description-cloth">
                <ion-icon id = 'desc-error' name="alert-circle-outline" class = 'error'></ion-icon>
                <textarea  id = 'desc' placeholder="description" id="" cols="30" rows="1" maxlength="50"></textarea>
                <ion-icon name="document-text-outline" class = 'icons-inp'></ion-icon>
            </div>
            <div class="count-cloth" >
                <ion-icon id = 'count-error' name="alert-circle-outline" class = 'error'></ion-icon>
                <input id = 'count' type="text" value="" class="some-input" placeholder="count">
                <ion-icon name="layers-outline" class = 'icons-inp'></ion-icon>
            </div>
            <div class="price-cloth"  >
                <ion-icon id = 'price-error' name="alert-circle-outline" class = 'error'></ion-icon>
                <input id = 'price' type="text" value="" class="some-input" placeholder="price">
                <ion-icon name="card-outline" class = 'icons-inp'></ion-icon>
            </div>
            <div class = 'img-container'>
                
            </div>
            <div class="upload">
                <button class = 'upload-files'><ion-icon name="images-outline"></ion-icon></button>
                <input class = 'file-input' type="file" name = 'files' multiple accept='image/*' hidden>
                <button class="upload-btn">
                    Upload
                </button>
            </div>
        </div>
        <div class="social-media">
            <ion-icon class = 'git' name="logo-github"></ion-icon>
            <ion-icon class = 'vk' name="logo-vk"></ion-icon>
            <ion-icon class = 'ds' name="logo-discord"></ion-icon>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
        <script src="static/js/script.js"></script>
    </body>
</html>

Вопрос задан 04 апр.
138 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

flstamn @flstamn Автор вопроса

вот полный js, сорян что не сразу кинул

jQuery(function ($) {
  function fix_size() {
      var images = $('.img-container img');
      images.each(setsize);
      function setsize() {
          var img = $(this),
              img_dom = img.get(0),
              container = img.parents('.img-container');
          if (img_dom.complete) {
              resize();
          } else img.one('load', resize);

          function resize() {
              if ((container.width() / container.height()) < (img_dom.width / img_dom.height)) {
                  img.width('100%');
                  img.height('auto');
                  return;
              }
              img.height('100%');
              img.width('auto');
          }
      }
  }
  $(window).on('resize', fix_size);
  fix_size();
});
let array_for_flask = [];
const textarea = document.querySelector('textarea');

textarea.addEventListener( 'input', autosize );
             
function autosize(){
  this.style.height = 'auto';
  let applyNow = this.style.offsetHeight;
  this.style.height = this.scrollHeight - 20 + 'px';
}

// check nonable placeholder and input after set display block for button

let button = document.querySelector('.upload-btn');


button.addEventListener('click', ()=>{
    let cloth_name = document.getElementById('name').value;
    let cloth_desc = document.getElementById('desc').value;
    let cloth_count = document.getElementById('count').value;
    let cloth_price = document.getElementById('price').value;

    nonable_inputs = {
        'name-error':cloth_name,
        'desc-error':cloth_desc,
        'count-error':cloth_count,
        'price-error':cloth_price,
    };

    for (let key in nonable_inputs){
        if (nonable_inputs[key] == ''){
            setTimeout( () => {
                document.getElementById(key).style.visibility = 'visible'
              }, 0);
              setTimeout( () => {
                document.getElementById(key).style.visibility = 'hidden'
              }, 1500);
        };
    };
    if (cloth_name != '' && cloth_desc != '' && cloth_count != '' && cloth_price != ''){
        for (let key in nonable_inputs){
            array_for_flask.push(nonable_inputs[key]);
          };
          console.log(array_for_flask)
    };
});


const buttonSelect = document.querySelector('.upload-files');
const fileInput = document.querySelector('.file-input');


buttonSelect.addEventListener('click', ()=>{
  fileInput.click()
  $('.img-container').css('display', 'flex')
});

fileInput.addEventListener('change', (event)=>{
  event.preventDefault();
  array_for_flask.push(...fileInput.files);
  ShowFiles();
});

function del(name) {
  const name_img = name.getAttribute('name');
  const index = array_for_flask.findIndex(element => element.name === name_img);
  
  $(`.${name_img}`).remove();
  array_for_flask.splice(index, 1);
  
  
  console.log(array_for_flask)
};


function ShowFiles(){
  const UploadDiv = document.querySelector('.img-container');
  UploadDiv.innerHTML = array_for_flask.map(images =>{
    const fileReader = new FileReader();
    const id = `F-${Math.random().toString(32).substring(7)}`;
    fileReader.readAsDataURL(images);
    fileReader.onload = ()=>{
      const url = fileReader.result;
      const name_img = images.name;
      const img = `   
          <img class = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'>
      `;
      UploadDiv.innerHTML +=img;

      
    };
  }).join('');
};

Вот. HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="static/css/style.css">
    </head>
    <body>
        <div class = 'logo' id = 'navbar'>
            <h1>Ayesha</h1>
        </div>
        <section class="instruction">
            <div class="text-block">
                <h1>Admin</h1>
            </div>
            <div class="pic-block">
            </div>
        </section>
        <div class ='card'>
            <div class="text-in-card">
                <h1>New Coth</h1>
            </div>
            <div class="name-cloth">
                <ion-icon id = 'name-error' name="alert-circle-outline" class = 'error'></ion-icon>
                <input id = 'name' type="text" value="" class="some-input" placeholder="name">
                <ion-icon name="shirt-outline" class = 'icons-inp'></ion-icon>
            </div>
            <div class="description-cloth">
                <ion-icon id = 'desc-error' name="alert-circle-outline" class = 'error'></ion-icon>
                <textarea  id = 'desc' placeholder="description" id="" cols="30" rows="1" maxlength="50"></textarea>
                <ion-icon name="document-text-outline" class = 'icons-inp'></ion-icon>
            </div>
            <div class="count-cloth" >
                <ion-icon id = 'count-error' name="alert-circle-outline" class = 'error'></ion-icon>
                <input id = 'count' type="text" value="" class="some-input" placeholder="count">
                <ion-icon name="layers-outline" class = 'icons-inp'></ion-icon>
            </div>
            <div class="price-cloth"  >
                <ion-icon id = 'price-error' name="alert-circle-outline" class = 'error'></ion-icon>
                <input id = 'price' type="text" value="" class="some-input" placeholder="price">
                <ion-icon name="card-outline" class = 'icons-inp'></ion-icon>
            </div>
            <div class = 'img-container'>
                
            </div>
            <div class="upload">
                <button class = 'upload-files'><ion-icon name="images-outline"></ion-icon></button>
                <input class = 'file-input' type="file" name = 'files' multiple accept='image/*' hidden>
                <button class="upload-btn">
                    Upload
                </button>
            </div>
        </div>
        <div class="social-media">
            <ion-icon class = 'git' name="logo-github"></ion-icon>
            <ion-icon class = 'vk' name="logo-vk"></ion-icon>
            <ion-icon class = 'ds' name="logo-discord"></ion-icon>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
        <script src="static/js/script.js"></script>
    </body>
</html>

Написано 04 апр.

robothot @robothot

Ну у тебя проблема в названии атрибута name по которому ты обращаешься. А именно в поиске по классу.
Ты сам подумай, ты обращаешься к .classname.jpeg
Js думает, что ты ищешь объект с классом class='имя класса расширение'.
Намудрил конечно... Присвой нормальное имя изображению и обратись к нему по этому имени и все у тебя удалится. Только что все проверил

Написано 04 апр.

robothot @robothot

function ShowFiles(){
    const UploadDiv = document.querySelector('.img-container');
    UploadDiv.innerHTML = array_for_flask.map(images =>{
      const fileReader = new FileReader();
      const id = `F-${Math.random().toString(32).substring(7)}`;
      fileReader.readAsDataURL(images);
      fileReader.onload = ()=>{
        const url = fileReader.result;
        const name_img = images.name; <--------- МЕНЯЕМ НА 'load_img'
        const img = `   
            <img class = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'>
        `;
        UploadDiv.innerHTML +=img;
  
        
      };
    }).join('');
  };

И правим функцию del

function del(name) {
    const name_img = name.getAttribute('name');
    const index = array_for_flask.findIndex(element => element.name === name_img);

    $('.load_img').remove();  <---------------------------
    array_for_flask.splice(index, 1);
  };

Написано 04 апр.

flstamn @flstamn Автор вопроса

robothot, спасибо большое тебе

Написано 04 апр.

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как ограничить доступ определенному пользователю в своем телеграмм боте?
- 1 подписчик
- 3 часа назад
- 37 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как сделать ширину блока по ширине контента?
- 1 подписчик
- 9 часов назад
- 46 просмотров
1

ответ
JavaScript

Простой
Как найти и сгруппировать элементы с одинаковым классом?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как скроллить определенный блок Div?
- 1 подписчик
- вчера
- 134 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как написать текст на окружности и посчитать точки?
- 1 подписчик
- 26 дек.
- 96 просмотров
0

ответов
JavaScript

Средний
Как остановить весь скрипт js при выполнении условия tampermonkey?
- 1 подписчик
- 26 дек.
- 82 просмотра
2

ответа
JavaScript

Средний
.stopPropagation() на самом деле не останавливает распространение события?
- 1 подписчик
- 26 дек.
- 124 просмотра
1

ответ
JavaScript

Простой
Нужно ли проверять импорт модуля js на повторную загрузку?
- 1 подписчик
- 26 дек.
- 59 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 25 дек.
- 57 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 25 дек.
- 64 просмотра
2

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Исправить ошибки в консольном интерфейсе с применением C# и NET

28 дек. 2024, в 22:21

500 руб./за проект

Сделать бота

28 дек. 2024, в 21:56

25000 руб./за проект

Доработка Битрикс

28 дек. 2024, в 18:50

1200 руб./в час

Answer 1 · 2024-04-04 19:15:08

Ты посмотри в консоль, она же тебе пишет

Uncaught ReferenceError: array_for_flask is not defined

Ты обращаешься к array_for_flask, а у тебя она не объявлена, соответственно все что дальше вообще не выполняется. Не знаю какая картинка у тебя там появляется...
Этот код не работает. Либо, если не полный скинул, то кидай остальное

Почему не удаляется фотография при нажатии на неё?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт