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

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 апр.
134 просмотра

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

Подписаться 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

Простой
Как вывести фотографии из папки или из контейнера последовательно с отработкой на каждой анимации?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
JavaScript

Простой
Как проверить три последние цифры числа и по условию изменить их?
- 1 подписчик
- вчера
- 142 просмотра
2

ответа
JavaScript

Простой
Как правильнее организовать код калькулятора?
- 1 подписчик
- 02 мая
- 126 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- 02 мая
- 740 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 69 просмотров
0

ответов
JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- 01 мая
- 59 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 187 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 01 мая
- 59 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- 01 мая
- 716 просмотров
4

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- 01 мая
- 95 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Senior Fullstack JavaScript Node.js + React

Simplenight inc.

от 4 000 до 6 500 $

Исследовать рынок, выстроить маркетинговую стратегию

04 мая 2024, в 23:31

1000 руб./в час

Дизайнер в IT компанию

04 мая 2024, в 23:17

1200 руб./в час

Установка OS debian 11, raid 5, raid 0

04 мая 2024, в 22:32

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

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

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

Uncaught ReferenceError: array_for_flask is not defined

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

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

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

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

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